仿密码输入

html

<div class="mem_passblock">

            <div class="mem_passiput">
    <input type="tel" id="password" name="password" maxlength="4">
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
</div>

</div>


js

$('#password').on('input', function(e) {
             var number = 4;
             var pw = $('#password').val();
             var list = $('.mem_passiput ul li');
             for(var i = 0; i < number; i++) {
                 if(pw[i]) {
                    $(list[i]).addClass("pass_point");
                 } else {
                     $(list[i]).removeClass("pass_point");
                 };
             };

        });


注:input光标位置不正确  可以用css    letter-spacing

猜你喜欢

转载自blog.csdn.net/weixin_42119076/article/details/80828051