前端入坑紀(jì) 32
今天是個(gè)雙更的日子僻爽，也是個(gè)值得多多努力的日子。
未來(lái)的你贾惦，也一定會(huì)感謝如今勤耕不挫的自己胸梆！
最近呢敦捧，碰到個(gè)類似APP端密碼輸入框的效果，除了限制單個(gè)數(shù)字輸入碰镜，還得自動(dòng)focus到下一個(gè)input里兢卵，所以js關(guān)鍵不可少啊。
閑言少敘绪颖，直入正題秽荤。
效果圖
OK，first things first柠横！項(xiàng)目鏈接
HTML 結(jié)構(gòu)
<p class="tipsPgf">輸入提現(xiàn)密碼,完成身份驗(yàn)證</p>
<div id="passdWrp">
<span class="active">
<input type="password" tabindex="0" minlength="1" maxlength="1" name="">
</span>
<span>
<input type="password" tabindex="1" minlength="1" maxlength="1" name="">
</span>
<span>
<input type="password" tabindex="2" minlength="1" maxlength="1" name="">
</span>
<span>
<input type="password" tabindex="3" minlength="1" maxlength="1" name="">
</span>
<span>
<input type="password" tabindex="4" minlength="1" maxlength="1" name="">
</span>
<span>
<input type="password" tabindex="5" minlength="1" maxlength="1" name="">
</span>
<div class="wrpBs">
<a id="sureBtn" href="javascript:;">確定</a>
</div>
</div>
每個(gè)input都絕對(duì)定位到包裹它的span里窃款，每個(gè)span都是自適應(yīng)寬高
CSS 結(jié)構(gòu)
body {
margin: 0;
padding: 0;
background-color: #F4F4F4
}
input {
border: none;
outline: none;
background: none;
}
a {
outline: none;
text-decoration: none;
}
.tipsPgf {
font-size: 16px;
color: #5e5e5e;
letter-spacing: 0.86px;
text-align: center;
width: 80%;
margin: 3% auto;
}
#passdWrp {
text-align: center
}
#passdWrp span {
position: relative;
display: inline-block;
padding: 6.5%;
background-color: #fff;
margin: 3px 2px;
}
#passdWrp span input {
font-size: 14px;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 30px;
text-align: center;
}
.wrpBs {
width: 96%;
margin: 5% auto
}
.wrpBs a {
display: block;
margin: 0 4%;
width: 92%;
height: 45px;
line-height: 45px;
border-radius: 4px;
text-align: center;
background-color: #4990e2;
color: #fff;
font-size: 16px;
}
都是些常規(guī)的css布局樣式，沒(méi)什么特殊的style
JS 結(jié)構(gòu)
var mInput = document.getElementsByTagName("input");
var sBtn = document.getElementById("sureBtn");
// 進(jìn)入頁(yè)面時(shí)焦點(diǎn)到第一個(gè)input輸入框
mInput[0].focus();
// 點(diǎn)擊某個(gè)input時(shí)牍氛，重置它和后面的input值為空
for (var l = 0; l < mInput.length; l++) {
mInput[l].ontouchstart = function() {
var indx = this.getAttribute("tabindex");
for (var i = indx; i < mInput.length; i++) {
mInput[i].value = "";
}
}
}
// 點(diǎn)擊確定按鈕時(shí)晨继，判斷是否為空，如果不為空搬俊，則推入到數(shù)組中打印到控制臺(tái)
sBtn.onclick = function() {
var passArr = [];
for (var l = 0; l < mInput.length; l++) {
if (mInput[l].value != "") {
passArr.push(mInput[l].value);
} else {
alert("有未填項(xiàng)紊扬！");
return;
}
}
console.log(passArr)
}
// 這里就是判斷輸入為數(shù)字，并自動(dòng)下移一個(gè)input的函數(shù)
for (var i = 0; i < mInput.length; i++) {
mInput[i].addEventListener("keyup", function(evt) {
var indx = this.getAttribute("tabindex");// 獲取當(dāng)前input的tabindex
var _val = this.value;// 獲取當(dāng)前input里面的值
if (_val.match(/\d/)) {// 判斷是否為數(shù)字
indx++;
如果下一個(gè)input已經(jīng)是末尾了悠抹，自動(dòng)focus到確定按鈕
if (indx == mInput.length) {
sBtn.focus();
}
// 70毫秒后珠月，焦點(diǎn)至下一個(gè)input
setTimeout(function() {
mInput[indx].focus();
}, 70);
} else {
this.value = "";
alert("請(qǐng)輸入數(shù)字")
}
// 這里是最坑爹的，在電腦端模擬是有值的楔敌。可是到了移動(dòng)端獲取不到驻谆，初步估計(jì)是用了第三方輸入法卵凑。求助知道的小伙伴，求解惑ＪるＩ茁！
console.log(evt.key);
})
}
基本到這里象对，就算是大功告成了黑忱。有興趣的小伙伴可以研究下，加油哦勒魔！
好了甫煞，到此，本文告一段落冠绢！感謝您的閱讀抚吠！祝你身體健康，闔家幸福弟胀！
