移动端密码框输入,判断密码输入是否正确
<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内容)

浙公网安备 33010602011771号