<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*/ 5.9467rem; height:1.0133rem; border:1px solid #ddd; } .info .ipts>input{ position:absolute; top:0; left:0; 100%; height:1.0133rem; z-index:1; opacity: 0; } .info .passIpts{ overflow: hidden; } .info .passIpts input{ 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内容)