隱藏的輸入框調起軟鍵盤問題--ios/安卓

向陽的小老鼠發表於2020-09-24
iOS安卓

pia效果圖

移動端 驗證碼/密碼 輸入框實現--安卓/ios適用

基於以上驗證碼實現方式  的後期填坑來了，以下移動端 驗證碼/密碼 輸入框實現--安卓/ios適用統稱“上篇文章”

最近仿照我的上篇文章又新寫了個驗證碼的小頁面，有些微的不同

輸入身份證後四位，由於可能有X字母，所以隱藏input的type不能設定為number了，懶惰的我直接刪掉了type屬性（造坑開始）

且因為上次研究時漏掉了一些知識點，也造了一波坑，以下一一列舉。

 

問題1、四位空格輸入，1234，但是每次輸入下一個數字，前面的內容都會整體向後移動，輸完結果是4321；且輸入一半點刪除沒反應。還得輸入總共五位數字才能刪除

 

？？！我懵了，input給顯示的幾個span的賦值方式（見上篇文章的js程式碼）是一樣樣的呀，怎麼回事

debug發現隱藏的input值就已經是4321了，所以不是賦值方法的問題，以下是有問題的隱藏input的樣式：

#IdentifyNoCheckInput {
    width: 0;
    border: 0;
    padding: 0;
    margin: 0;
    height: 10px;
    position: absolute;
    top: -11px;
    outline: none;
    color: transparent;
    text-shadow: 0 0 0 transparent;
}

最初懷疑是游標自動到了最前面導致的，使用了百度的手動移動游標方法，並不管用。

對比上篇文章中隱藏input的樣式，可以發現本次寬度設成了0，有高度（高度隨意，只要不擋住別的元素顯示就行），有寬度或高度是為了佔位，能喚起軟鍵盤。

而上篇文章中是有寬度的，這個差別引起了我的懷疑。為以上樣式新增兩條

width: 100%;
margin-left: -100%;

再進行輸入，正常了，輸入1234就顯示1234，也不會有刪不掉的情況存在了。

第一個坑填坑完畢。

總結：設定寬度高度是為了佔位，從而喚起軟鍵盤。有高度或有寬度就可以，但是建議設定寬度，以免發生輸入內容反轉的情況。

 

問題2、部分ios手機無法正常喚起軟鍵盤

在測試的時候，手機型號就那幾個，大家測得順順當當。上線之後就報了好多ios無法正常輸入的問題。

問題版本如下：

蘋果p8，蘋果6+（系統版本10），蘋果6pok（系統版本11.4.1）和蘋果6p plus（系統版本12.4.8）

以下是隱藏input的程式碼：

<input id="IdentifyNoCheckInput" value="" oninput="idNoInsert()" onclick="this.blur();">

最初思路跑偏，開始各種查版本相容的方法，但是沒有合適的解決方案。

後在老大的提醒下，既然上篇文章中的驗證碼沒有報這個問題，這個也不應該有問題啊。

對比發現就是少了個type，就想到是不是缺少type導致的，加了個type="text"

emmmm，問題解決。

菜鳥教程描述如下：

大部分的坑都是自己給自己造的~~~

 

以下貼完整程式碼（我這個頁面是以iframe被其他頁面呼叫的，所以有個獲取連結的操作以及拆分引數的方法）

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="textml; charset=UTF-8" />
    <meta http-equiv="x-dns-prefetch-control" content="on" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="telephone=no" name="format-detection" />
    <meta name="full-screen" content="yes" />
    <meta name="x5-fullscreen" content="true" />
    <script src="jquery-3.2.1.min.js"></script>
</head>
<style>
    #IdentifyNoCheck {
        width: 90%;
        height: 50%;
        margin: 0 auto;
        position: absolute;
        left: 5%;
        top: 25%;
        border: 1px solid rgb(246, 171, 119);
        background-color: rgba(246, 172, 120, 0.25);
        border-radius: 4px;
        box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.10);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .IdentifyNoCheckTitle {
        text-align: center;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #IdentifyNoCheckInput {
        width: 0;
        border: 0;
        padding: 0;
        margin: 0;
        height: 10px;
        position: absolute;
        top: -11px;
        outline: none;
        color: transparent;
        text-shadow: 0 0 0 transparent;
        width: 100%;
        margin-left: -100%;
    }

    /* 驗證碼table */
    #IdentifyNoTable {
        width: 90%;
        margin: 0 auto;
        height: 30%;
        border: 1px solid rgba(74, 35, 35, 0.42);
        background: white;
        border-radius: 4px;
        display: flex;
        justify-content: center;
    }

    #IdNumbeFrontSpan {
        float: left;
        border-radius: 5px;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        font-weight: 900;
        color: red;
        height: 40px;
        top: 20px;
        position: relative;
    }

    .IdentifyNoEndSpan {
        width: 20px;
        display: block;
        float: left;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        font-weight: 900;
        color: red;
        border-bottom: 2px solid rgba(74, 35, 35, 0.42);
        height: 40px;
        margin-left: 5px;
        top: 20px;
        position: relative;
    }

    /* 按鈕樣式 */
    .s_button {
        height: 30%;
        z-index: 1003;
        top: 70%;
        left: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 按鈕 */
    .tool_btn {
        height: 46px;
        line-height: 46px;
        cursor: pointer;
        color: #fff;
        font-size: 14px;
        text-align: center;
        border-radius: 38px;
        background: #E98767;
        border: 0;
    }
</style>
<script src="jquery-3.2.1.min.js"></script>

<body>
    <div id="IdentifyNoCheck" class="">
        <div class="IdentifyNoCheckTitle">
            <p>請輸入驗證內容</p>
        </div>
        <input id="IdentifyNoCheckInput" type="text" value="" oninput="idNoInsert()" onclick="this.blur();">
        <div id="IdentifyNoTable">
            <!-- <span id="IdNumbeFrontSpan"></span> -->
            <span id="idNo_1" class="IdentifyNoEndSpan" onclick="intoIdNo(1)"></span>
            <span id="idNo_2" class="IdentifyNoEndSpan" onclick="intoIdNo(2)"></span>
            <span id="idNo_3" class="IdentifyNoEndSpan" onclick="intoIdNo(3)"></span>
            <span id="idNo_4" class="IdentifyNoEndSpan" onclick="intoIdNo(4)"></span>
        </div>
        <div id="s_button" class="s_button">
            <div class="tool_btn" onclick="check()" style="width:38%">確認</div>
        </div>
    </div>
</body>
<script>
    var param0 = "";


    // 對全域性中span標籤（即輸入橫線）之外區域點選事件的監聽，用以收起軟鍵盤,以及防止點選輸入橫線之外的地方也喚起輸入鍵盤，篩選有點簡陋，可自行優化
    $('body').on('touchend', function (el) {
        if (el.target.tagName != 'SPAN') {
            $('IdentifyNoCheckInput').blur()
        }
    })

    // 驗證輸入四位是否正確
    function check() {
        var CheckCode = document.getElementById("IdentifyNoCheckInput").value;
        var isQueren = false;
        if (CheckCode != null && CheckCode != "" && CheckCode != undefined) {
            if (CheckCode.length == 4) {
                isQueren = true;
            } else {
                alert("請輸入正確內容！")
            }
        } else {
            alert("驗證內容不能為空！")
        }
        if (isQueren) {
            $.ajax({
               。。。
            })
        }
    }

    // 獲取url中引數
    function getParam(targetEle) {
        var arrs = targetEle.split('&');
        var preArr = []
        for (var i = 0; i < arrs.length; i++) {
            var pre = arrs[i];
            var preFlag = pre.split('=');
            preArr.push(preFlag[1]);
        }
        param0 = preArr[0]
    }

    // 真實輸入框
    function idNoInsert() { // input內容改變時觸發
        for (var i = 1; i <= 4; i++) {
            var nextId = 'idNo_' + i
            document.getElementById(nextId).innerHTML = '&nbsp;&nbsp;'
        }
        var inNo = document.getElementById("IdentifyNoCheckInput").value
        if (inNo.length > 4) { // 當type="number"，屬性maxlength不起作用
            inNo = inNo.slice(0, 4)
            document.getElementById("IdentifyNoCheckInput").value = inNo
        }
        var inNoArr = inNo.split('');
        for (var i = 0; i < inNoArr.length; i++) {
            const num = inNoArr[i];
            var id = 'idNo_' + Number(i + 1)
            document.getElementById(id).innerHTML = num
        }
    }

    // 可見輸入橫線的點選事件
    function intoIdNo(index) {
        var ele = document.getElementById("IdentifyNoCheckInput")
        ele.focus()
    }

    $(document).ready(function () {
        // 得到iframe的引數
        var targetEle = window.parent.document.getElementById("iframeId").contentWindow.location
            .search; // 由於跨域問題，本地使用此方法報錯
        getParam(targetEle)
    });
</script>

</html>

 

相關文章