上次看到别人说写一个类似支付宝支付密码的输入框效果，今天就想自己写了试试看，大体功能是实现了。
已实现部分：
1. 焦点会随着输入数值往后推移
2. 如果输入的非0-9，则会出现提示
3. 按Backspance回车可以对应格子焦点往前推移
4. 按回车或者点击按钮可以触发按钮点击事件，获得输入值
未完善部分：
1. 在控制输入类型的时候，只有0-9、非0-9以及回车、回删几个键盘事件的区分，不够完善
2. 输入框用的input标签，password类型，会将输入值变成圆点，但是圆点太小不够美观，不知道如何改变圆点大小，考虑是否要画个圆点遮盖
ps：代码不够精简，很多感觉还可以改进精简。
效果图：
代码段：
**index.html 主要代码**<div class="content"><div class="title">支付宝支付密码：</div><div class="box"></div><div class="forget">忘记密码？</div><div class="point">请输入6位数字密码</div><button class="getPasswordBtn">一键获取密码</button><div class="errorPoint">请输入数字！</div></div>
**reset.css代码***{padding: 0;margin: 0;}.content{width: 400px;height: 50px;margin: 0 auto;margin-top: 100px;}.title{font-family: '微软雅黑';font-size: 16px;}.box{width: 190px;height: 30px;border:1px solid #ccc;margin-top: 10px;line-height: 30px;}.content .box,.forget{display: inline-block;}.content .forget{width: 100px;color:lightskyblue;vertical-align: super;font-size: 14px;}.box input.paw{width: 30px;height: 20px;line-height: 20px;margin-left: -9px;border:none;border-right: 1px dashed #ccc;text-align: center;}.box input.paw:nth-child(1){margin-left: 0;}.content .box .pawDiv:nth-child(6) input.paw{border: none;}.content .box input.paw:focus{outline:0;}.content .box .pawDiv{display: inline-block;line-height: 30px;width: 31px;height: 31px;margin-top: -2px;float: left;}.point{font-size: 14px;color: #ccc;margin: 5px 0;}.errorPoint{color: red;display: none;}.getPasswordBtn{width: 100px;height: 30px;background-color: cornflowerblue;font-size: 14px;font-family: '微软雅黑';color: white;border: none;}
**main.js代码**/*动态生成*/var box=document.getElementsByClassName("box")[0];function createDIV(num){for(var i=0;i<num;i++){var pawDiv=document.createElement("div");pawDiv.className="pawDiv";box.appendChild(pawDiv);var paw=document.createElement("input");paw.type="password";paw.className="paw";paw.maxLength="1";paw.readOnly="readonly";pawDiv.appendChild(paw);}}createDIV(6);var pawDiv=document.getElementsByClassName("pawDiv");var paw=document.getElementsByClassName("paw");var pawDivCount=pawDiv.length;/*设置第一个输入框默认选中*/pawDiv[0].setAttribute("style","border: 2px solid deepskyblue;");paw[0].readOnly=false;paw[0].focus();var errorPoint=document.getElementsByClassName("errorPoint")[0];/*绑定pawDiv点击事件*/function func(){for(var i=0;i<pawDivCount;i++){pawDiv[i].addEventListener("click",function(){pawDivClick(this);});paw[i].onkeyup=function(event){console.log(event.keyCode);if(event.keyCode>=48&&event.keyCode<=57){/*输入0-9*/changeDiv();errorPoint.style.display="none";}else if(event.keyCode=="8") {/*退格回删事件*/firstDiv();}else if(event.keyCode=="13"){/*回车事件*/getPassword();}else{/*输入非0-9*/errorPoint.style.display="block";this.value="";}};}}func();/*定义pawDiv点击事件*/var pawDivClick=function(e){for(var i=0;i<pawDivCount;i++){pawDiv[i].setAttribute("style","border:none");}e.setAttribute("style","border: 2px solid deepskyblue;");};/*定义自动选中下一个输入框事件*/var changeDiv=function(){for(var i=0;i<pawDivCount;i++){if(paw[i].value.length=="1"){/*处理当前输入框*/paw[i].blur();/*处理上一个输入框*/paw[i+1].focus();paw[i+1].readOnly=false;pawDivClick(pawDiv[i+1]);}}};/*回删时选中上一个输入框事件*/var firstDiv=function(){for(var i=0;i<pawDivCount;i++){console.log(i);if(paw[i].value.length=="0"){/*处理当前输入框*/console.log(i);paw[i].blur();/*处理上一个输入框*/paw[i-1].focus();paw[i-1].readOnly=false;paw[i-1].value="";pawDivClick(pawDiv[i-1]);break;}}};/*获取输入密码*/var getPassword=function(){var n="";for(var i=0;i<pawDivCount;i++){n+=paw[i].value;}alert(n);};var getPasswordBtn=document.getElementsByClassName("getPasswordBtn")[0];getPasswordBtn.addEventListener("click",getPassword);/*键盘事件*/document.onkeyup=function(event){if(event.keyCode=="13") {/*回车事件*/getPassword();}};
