js模拟输入支付密码

Posted 2021-01-13 shuihanxiao

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