很多人再找的6位框输入密码 类似于支付时候的输入密码框

Posted 2020-10-05

引用js

<script src="http://zeptojs.com/zepto.min.js"></script>  

 

css

 

.pwd-box{  

        width:310px;  

        padding-left: 1px;  

        position: relative;  

        border: 1px solid #9f9fa0;  

        border-radius: 3px;  

over-flow:hidden  

    }  

    .pwd-box input[type="tel"]{  

        width: 99%;  

        height: 45px;  

        color: transparent;  

        position: absolute;  

        top: 0;  

        left: 0;  

        border: none;  

        font-size: 18px;  

        opacity: 0;  

        z-index: 1;  

        letter-spacing: 35px;  

    }  

    .fake-box input{  

        width: 44px;  

        height: 48px;  

        border: none;  

        border-right: 1px solid #e5e5e5;  

        text-align: center;  

        font-size: 30px;  

    }  

    .fake-box input:nth-last-child(1){  

        border:none;  

    }  

 

 

html

 

<div class="pwd-box">  

    <input type="tel" maxlength="6" class="pwd-input" id="pwd-input">  

    <div class="fake-box">  

        <input type="text" readonly="">  

        <input type="text" readonly="">  

        <input type="text" readonly="">  

        <input type="text" readonly="">  

        <input type="text" readonly="">  

        <input type="text" readonly="">  

    </div>  

</div>  

 

 

js

 

var $input = $(".fake-box input");  

    $("#pwd-input").on("input", function() {

        var pwd = $(this).val().trim();  

        for (var i = 0, len = pwd.length; i < len; i++) {

            $input.eq("" + i + "").val(pwd[i]);  

        }  

        $input.each(function() {

            var index = $(this).index();  

            if (index >= len) {

                $(this).val("");  

            }

        });  

        if (len == 6) {

            //执行其他操作

        }  

    });