前端入坑纪 32
今天是个双更的日子，也是个值得多多努力的日子。
未来的你，也一定会感谢如今勤耕不挫的自己！
最近呢，碰到个类似APP端密码输入框的效果，除了限制单个数字输入，还得自动focus到下一个input里，所以js关键不可少啊。
闲言少叙，直入正题。
效果图
OK，first things first！项目链接
HTML 结构
<p class="tipsPgf">输入提现密码,完成身份验证</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>
每个input都绝对定位到包裹它的span里，每个span都是自适应宽高
CSS 结构
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;
}
都是些常规的css布局样式，没什么特殊的style
JS 结构
var mInput = document.getElementsByTagName("input");
var sBtn = document.getElementById("sureBtn");
// 进入页面时焦点到第一个input输入框
mInput[0].focus();
// 点击某个input时，重置它和后面的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 = "";
}
}
}
// 点击确定按钮时，判断是否为空，如果不为空，则推入到数组中打印到控制台
sBtn.onclick = function() {
var passArr = [];
for (var l = 0; l < mInput.length; l++) {
if (mInput[l].value != "") {
passArr.push(mInput[l].value);
} else {
alert("有未填项！");
return;
}
}
console.log(passArr)
}
// 这里就是判断输入为数字，并自动下移一个input的函数
for (var i = 0; i < mInput.length; i++) {
mInput[i].addEventListener("keyup", function(evt) {
var indx = this.getAttribute("tabindex");// 获取当前input的tabindex
var _val = this.value;// 获取当前input里面的值
if (_val.match(/\d/)) {// 判断是否为数字
indx++;
如果下一个input已经是末尾了，自动focus到确定按钮
if (indx == mInput.length) {
sBtn.focus();
}
// 70毫秒后，焦点至下一个input
setTimeout(function() {
mInput[indx].focus();
}, 70);
} else {
this.value = "";
alert("请输入数字")
}
// 这里是最坑爹的，在电脑端模拟是有值的。可是到了移动端获取不到，初步估计是用了第三方输入法。求助知道的小伙伴，求解惑！！！
console.log(evt.key);
})
}
基本到这里，就算是大功告成了。有兴趣的小伙伴可以研究下，加油哦！
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
