js仿支付宝多方框输入支付密码效果

上次看到别人说写一个类似支付宝支付密码的输入框效果，今天就想自己写了试试看，大体功能是实现了。

已实现部分：
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（）; }};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。