jquery+css+html制作6位支付密码框

jquery+css+html制作6位支付密码框

废话不多说，直接上代码，里面有些可能需要调试一下，写了一遍，估计以后也很少用到，分享给有需要的朋友

1.先看看效果，以下是修改支付密码的效果，一共输入两遍，第一遍输入满6位直接切换第二遍，第二遍输入完成之后跟第一遍做对比，两次密码一致直接请求后台修改密码

2.以下是支付输入密码页面，这个相对上面的页面要简单一点点，直接输就行了，输满6位直接请求后台判断密码是否正确

3.直接上修改支付密码页面的相关代码吧，第二个比较简单，懒得重复弄了

1) html代码

<div class="shadow" id="shadow">
<div class="close-flag" style="width:280px;display:flex;align-items:center;justify-content:flex-end;margin: 20vh auto 10px;">
    <img src="/static/images/guanbi.png" alt="" srcset="" style="width:20px;height:20px">
</div>
<div class="input-account-box">
    <div class="tip-name">
        <img src="">
        <span class="tip-name-content">请设置支付密码</span>
        <span></span>
    </div>
    <div class="pay-password">
        <input type="tel" maxlength="6" class="real-ipt">
        <div class="surface-ipts">
            <div id="pay-password" class="surface-ipt">