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();
}
};

来源：http://blog.csdn.net/github_35830425/article/details/52183717