移动端密码框输入，判断密码输入是否正确

Posted 2021-02-12 dyy-dida

<div class="info">
    <p class="title">添加银行卡</p>
    <p class="remark">请输入支付密码，以验证身份</p>
    <div class="ipts">
       <input type="tel" class="real-ipt">
       <div class="passIpts">
           <input type="password" class="pIpts">
           <input type="password" class="pIpts">
           <input type="password" class="pIpts">
           <input type="password" class="pIpts">
           <input type="password" class="pIpts">
           <input type="password" class="pIpts">
        </div>
     </div>
</div>

　（html内容）

.info{
    padding-top:2.6667rem;
}
.info .title{
     padding-bottom:0.6667rem;
     /*30px*/
     line-height:0.8rem;
     /*20px*/
     font-size:0.5867rem;
     text-align: center;
}
.info .remark{
     /*60px*/
     padding-bottom:1.6rem;
     line-height:0.5333rem;
     text-align: center;
}
.info .ipts{
      margin:0 auto;
      position:relative;
      /*120px*/
      width:5.9467rem;
      height:1.0133rem;
      border:1px solid #ddd;
}
.info .ipts>input{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:1.0133rem;
      z-index:1;
      opacity: 0;
}
.info .passIpts{
      overflow: hidden;
}
.info .passIpts input{
      width:16.667%;
      height:1.0133rem;
      line-height:1.0133rem;
      text-align:center;
      float:left;
      border-right:1px solid #ddd;
}

　　（CSS内容）

    var $input = $(".passIpts input");
    $(".real-ipt").on("input",function(){
        $(this).val($(this).val().replace(/s/g,""));
        var pwd = $(this).val();
        // console.log($(this).val());
        for (var i = 0, len = $(this).val().length; i < len; i++) {
            $input.eq("" + i + "").val(pwd[i]);
        }
        $input.each(function() {
            var index = $(this).index();
            if (index >= len) {
                $(this).val("");
                // console.log(index);
            }
        });
        if($(this).val().length == 6 ){
            window.location.href=‘addCard.html‘;
        }
    })

　　（JS内容）