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

已实现部分：1. 焦点会随着输入数值往后推移

2. 如果输入的非0-9，则会出现提示

3. 按Backspance回车可以对应格子焦点往前推移

4. 按回车或者点击按钮可以触发按钮点击事件，获得输入值

未完善部分：1. 在控制输入类型的时候，只有0-9、非0-9以及回车、回删几个键盘事件的区分，不够完善

2. 输入框用的input标签，password类型，会将输入值变成圆点，但是圆点太小不够美观，不知道如何改变圆点大小，考虑是否要画个圆点遮盖

ps：代码不够精简，很多感觉还可以改进精简。

效果图：

代码段：

**index.html 主要代码**

**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

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

pawDiv[i].addEventListener("click",function(){

pawDivClick(this);

});

paw[i].οnkeyup=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

pawDiv[i].setAttribute("style","border:none");

}

e.setAttribute("style","border: 2px solid deepskyblue;");

};

/*定义自动选中下一个输入框事件*/

var changeDiv=function(){

for(var i=0;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

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

n+=paw[i].value;

}

alert(n);

};

var getPasswordBtn=document.getElementsByClassName("getPasswordBtn")[0];

getPasswordBtn.addEventListener("click",getPassword);

/*键盘事件*/

document.οnkeyup=function(event){

if(event.keyCode=="13") {

/*回车事件*/

getPassword();

}

};

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

本文标题: js仿支付宝多方框输入支付密码效果

本文地址: http://www.cppcns.com/wangluo/javascript/164888.html