如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

先貼圖，需要實現的效果是這樣的。



實現思路有兩個：

 

1、用6個input，輸入一個數字后將focus給下一個輸入框。

2、用一個input和6個span，input隱藏，用span顯示。

 

現在大部分都是使用的第二種方法。（當然，如果你能說服產品也可以只用一個普通的input輸入框，就什么都不用考慮了）

 

兩種方案遇到的坑，以及優缺點，如下：

 

方案一：6個input。

 

主要就是用js切換focus，在安卓是相當流暢的，但是在ios會嚴重卡頓，簡直逼死強迫癥。

 

HTML：

<div class="divYZM">
    <!-- onpropertychange是為了避免在ios中oninput方法不被觸發 -->
    <input id="check_1" class="numDiv" type="number" oninput="inputNext(check_1)" onpropertychange="inputNext(check_1)"/>
    <input id="check_2" class="numDiv" type="number" oninput="inputNext(check_2)" onpropertychange="inputNext(check_2)"/>
    <input id="check_3" class="numDiv" type="number" oninput="inputNext(check_3)" onpropertychange="inputNext(check_3)"/>
    <input id="check_4" class="numDiv" type="number" oninput="inputNext(check_4)" onpropertychange="inputNext(check_4)"/>
    <input id="check_5" class="numDiv" type="number" oninput="inputNext(check_5)" onpropertychange="inputNext(check_5)"/>
    <input id="check_6" class="numDiv" type="number" oninput="inputNext(check_6)" onpropertychange="inputNext(check_6)"/>
</div>
JS：

function inputNext (id){ // 傳過來的id是個對象
    var index = Number(id.id.split("_")[1])
    if (id.value.length < 1) { // 刪除
        id.value = ''
        if (index > 1) {
            var preId = 'check_' + Number(Number(index) - 1)
            document.getElementById(preId).focus()
            return false
        }
    } else {
        if(id.value.length>1) {
            var nextValue = id.value.slice(1, 2)
            var nextId = 'check_' + Number(Number(index) + 1)
            id.value = id.value.slice(0, 1)
            if ((index+1) <= 6) {
                document.getElementById(nextId).value = nextValue
                document.getElementById(nextId).focus()
            }
        }
    }
}
PS：我這里寫的刪除方法是有問題的，這也是我果斷放棄這種方案的原因之一。

 

如果正常輸入，然后刪除是可以的。

 

但是輸入幾個數后，先點擊中間的框刪除一個數字，再回到最后，便只能將中間到最后的這幾個刪掉，最前面的還需要手動點一下得到focus才能刪除。

 

這對用戶來說，簡直太不友好了。。。

 

CSS：

.divYZM{
    width: 90%;
    margin: 0 auto;
    height: 100px;
    background-color: rgba(74, 35, 35, 0.42);
}
.numDiv{
    display: block;
    width: 10%;
    float: left;
    border-radius: 5px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    font-weight: 900;
    color: red;
    background-color: white;
    height: 60px;
    border: 0;
    padding: 0;
    margin: 0;
    margin-left: 5.7%;
    top: 20px;
    position: relative;
    caret-color: transparent;
}
這里遇到的坑，舉例一個。

 

input限制長度的屬性maxlength

 

a、與如下兩種配合使用（tel也可以限制）

<input type="text">  或者
<input type="password">
 

b、當type為number時不起作用。這時需要用js控制。

<input type="number" oninput="if(value.length>5) value=value.slice(0,5)" />
注意：此外，tel類型的input在ios上會調出全數字鍵盤，而number類型的input則會調出帶有標點符號的鍵盤。

 

 

方案二：1個input和6個span。

 

隱藏input，用span顯示內容。大坑就是，何種情況下能調起ios的軟鍵盤呢？

 

先貼一下我剛開始的input樣式。

width: 0;
height ：0；
border: 0;
padding: 0;
margin: 0;

第二種
display:none;
 

簡單粗暴，結果就是，ios木得反應。為啥呢，我想不通。

 

后來在晚上睡覺的時候我在想，我這兩種方式input都么有占位啊，那是不是占位了就可以了呢？

 

經測果然是可以的（默默譴責自己懶了一下，沒有將不隱藏input的情況，在手機上進行測試）。

 

接下來貼正確代碼。

 

CSS：

#yzm{
    width: 0;
    border: 0;
    padding: 0;
    margin: 0;
    height: .44rem;
    position: absolute;
    outline: none;
    color: transparent;
    text-shadow: 0 0 0 transparent;
    width: 300%;
    margin-left: -100%;
}
#yzmTable {
    width: 90%;
    margin: 0 auto;
    height: 100px;
    /* border: 1px solid red; */
    background-color: rgba(74, 35, 35, 0.42);
    /* opacity: 0.1; */
}
#yzmTable span { 
    display: block;
    width: 10%;
    float: left;
    border-radius: 5px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    font-weight: 900;
    color: red;
    background-color: white;
    height: 60px;
    margin-left: 5.7%;
    top: 20px;
    position: relative;
}
這里對input的樣式也包括對光標的隱藏，我在第一種方案中對光標未進行處理，因為在看到ios的卡卡卡之后果斷放棄了第一種方案。

 

HTML:

<input id="yzm" type="tel" maxlength="6" value="" oninput="yzmInsert()">
<div id="yzmTable">
    <span id="s_1" onclick="intoYzm(1)">&nbsp;&nbsp;</span>
    <span id="s_2" onclick="intoYzm(2)">&nbsp;&nbsp;</span>
    <span id="s_3" onclick="intoYzm(3)">&nbsp;&nbsp;</span>
    <span id="s_4" onclick="intoYzm(4)">&nbsp;&nbsp;</span>
    <span id="s_5" onclick="intoYzm(5)">&nbsp;&nbsp;</span>
    <span id="s_6" onclick="intoYzm(6)">&nbsp;&nbsp;</span>
</div>
JS:

function intoYzm(index) {
    var ele = document.getElementById("yzm")
    ele.focus()
}
 
function yzmInsert() { // input內容改變時觸發
    for (var i = 1; i <= 6; i++) {
        var nextId = 's_' + i
        document.getElementById(nextId).innerHTML = '&nbsp;&nbsp;'
    }
    var yzm = document.getElementById("yzm").value
    var yzmArr = yzm.split('');
    for (var i = 0; i < yzmArr.length; i++) {
        const num = yzmArr[i];
        var id = 's_' + Number(i + 1)
        document.getElementById(id).innerHTML = '&nbsp;' + num + '&nbsp;'
    }
}
 
// 收起軟鍵盤的方法，點擊除了輸入框之外的其他區域就收起軟鍵盤
$('body').on('touchend', function(el) {
    if(el.target.tagName != 'SPAN') {
            $('yzm').blur()    
      }
})
 

在第二種方案中有兩個地方注意下：

 

a、在js方法中加了對全局中6個span標簽（即六個輸入框）之外區域點擊事件的監聽，用以收起軟鍵盤，方法如下。

$('body').on('touchend', function(el) {
    if(el.target.tagName != 'SPAN') {
        $('yzm').blur()
    }
})
 （比較粗糙，如果頁面中還有別的部分就比較受影響了，可以自行改進）

b、在隱藏的input中添加了onclick方法，如下并且在其中用了blur方法使得此輸入框失去焦點。為什么這么做呢？

<input id="yzm" type="tel" maxlength="6" value="" oninput="yzmInsert()" onclick="this.blur();">
因為此處的隱藏并非真正的隱藏，而是透明化處理，邊框包括光標全部透明化，但實際上它還是占位的，所以當你點擊輸入框上方空白處時，仍會喚起軟鍵盤，就和我們之前所想的點擊輸入框之外區域就收起軟鍵盤沖突了。

 

因此將input自身的點擊獲取focus禁止掉，就OK了。

 

之前都是自己亂七八槽的瞎記，第一次寫給別人看，經驗不足，時間倉促。不足之處，還望指正。

 藍藍設計( m.jjddy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。