在做一個輸入短信驗證碼的功能，我做的這個功能的思路是有一個input輸入框，這個輸入框層級設置為負數，然后上面有六個div用於承接輸入框輸入的數字，這個功能網上有很多，一找就能找到，記錄幾個做這個的產生的bug，安卓的沒啥問題，ios有幾個問題
1：因為展示數字的位置下方是input,我們需要用輸入框的事件吊起鍵盤，還有要獲得它的值，所以還不能隱藏掉它也不能禁用它，所以在點擊的時候ios會產生光標顯示，安卓的沒有，
解決方法
margin-left: -100%; text-indent: -999em;在把輸入框的寬度定位1px，OK了一個
2：ios的短信驗證碼填充問題，ios收到短信驗證碼后你點擊輸入款會有個自動填充功能，你點擊了驗證碼，驗證碼會直接到輸入框里，但是在用這種隱藏隱藏輸入框層級的方法里就會產生填充的時候只有最后一個框有數字，
解決方法，
填充的時候input是可以獲得值的，取得input的值，當這個值等於6的時候也就是采用了填充，循環input的值放入進頁面填寫驗證碼的節點里，
ps;
我們在輸入驗證碼的時候都會有個效果，看上去好看一點，當這個內容有值時就給它加上咱們自己想要的樣式效果
var valCodeItems = $("div[name='val-item']"); //這是我輸入驗證碼的六個框
.available {
border-color: #0081db;
}
$(valCodeItems).each(function(i){
if($(this).text() != ''){
$(this).addClass('available')
}
})
至於短信填充兩遍的問題，價格maxlength就好了
來個全一些的html和js
<div class="val-box" id="val-box">
<input id="val-code-input" type="tel" maxlength="6" onkeyup="checkForNum(this)" onselectstart="return false;" onblur="checkForNum(this)" />
<div name="val-item"></div>
<div name="val-item"></div>
<div name="val-item"></div>
<div name="val-item"></div>
<div name="val-item"></div>
<div name="val-item"></div>
</div>
var valCodeInput = $('#val-code-input');
var valCodeItems = $("div[name='val-item']");
var regex = /^[\d]+$/;
var valCodeLength = 0;
$('#val-box').on('click',()=>{
valCodeInput.focus();
})
valCodeInput.on('input propertychange change', (e) => {
$(valCodeItems).each(function(i){
if($(this).text() != ''){
$(this).addClass('available')
}
})
valCodeLength = valCodeInput.val().length;
console.log("wode="+valCodeInput.val())
if(valCodeLength == 6){
console.log(valCodeLength)
$(valCodeItems).addClass('available')
$(valCodeItems[0]).text(valCodeInput.val()[0])
$(valCodeItems[1]).text(valCodeInput.val()[1])
$(valCodeItems[2]).text(valCodeInput.val()[2])
$(valCodeItems[3]).text(valCodeInput.val()[3])
$(valCodeItems[4]).text(valCodeInput.val()[4])
$(valCodeItems[5]).text(valCodeInput.val()[5])
}else{
console.log(valCodeLength)
}
if(valCodeInput.val() && regex.test(valCodeInput.val())) {
$(valCodeItems[valCodeLength - 1]).addClass('available');
$(valCodeItems[valCodeLength - 1]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength));
}
})
$(this).on('keyup', (e) => {
if(e.keyCode === 8) {
$(valCodeItems[valCodeLength]).removeClass('available');
$(valCodeItems[valCodeLength]).text("");
}
});
function checkForNum(obj) {
obj.value = obj.value.replace(/[\D]/g, '');
}
$('input').bind('input propertychange', function() { //這里是我用來根據驗證碼輸入來判斷提交按鈕的
console.log($('#val-code-input').val())
var phoneVal = $('#val-code-input').val()
if(phoneVal != ''){
console.log("輸入驗證碼")
document.getElementById("phoneTrue").disabled = false
document.getElementById("phoneTrue").style.background = "#F3AE25"
}else{
console.log("沒有輸入驗證碼")
document.getElementById("phoneTrue").disabled = true
document.getElementById("phoneTrue").style.background = "#E1E1E1"
}
})