js模拟输入支付密码

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>

js

/*222动态生成*/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].setAttribute("style","background: red;");            if(i==5){                alert("最后一个22")                getPassword();                return            }            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();    }};

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,.content .pwdBox{    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;}

原文地址：https://www.cnblogs.com/shuihanxiao/p/9813026.html