手机支付密码输入框

手机支付密码输入框
需要完成的效果大概如图：

手机支付密码输入框.png

直接上代码

<label>
        <input class="hide_input" id="inputbox" type="tel" maxlength="6" >
        <div id="passbox">
            <div class="passnum"></div>
            <div class="passnum"></div>
            <div class="passnum"></div>
            <div class="passnum"></div>
            <div class="passnum"></div>
            <div class="passnum"></div>
        </div>
</label>

label包着一个隐藏的input，和显示的每个数字单独框

js 代码:

        function passCode(id, clas){
            var passinput = $("#" + id)
            var passnum = $("." + clas)
            var inputVal;
            passinput.on("input",function(){
                inputVal = passinput.val();
                passnum.html('')
                passnum.removeClass("guang")
                for (var i = 0; i < inputVal.length; i++) {
                    var html = $("<span/>")
                    passnum.eq(i).html(html)
                }
                passnum.eq(inputVal.length).addClass('guang')
            })
            passinput.on('focus',function(){
                var vals = passinput.val()
                if (!vals.length) {
                    passnum.eq(0).addClass('guang')
                } else {
                    passnum.eq(vals.length).addClass('guang')
                } 
            })
            passinput.on("blur", function(){
                passnum.removeClass("guang")
            })
        }

        passCode('inputbox','passnum')

监听每次input的改变，对模拟框增加span，和光标的class；
当然啦，你还需要引入jQuery进行支持。

css：

#passbox{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    .passnum{
        width:50px;
        height:50px;
        border:1px solid black;
        line-height: 50px;
        text-align: center;
    }
    .passnum span{
        position:relative;
        display:inline-block;
        height:10px;
        width:10px;
        background-color:black;
        border-radius:50%;
    }
    .guang::after { 
        content:''; 
        display: inline-block; 
        width:2px; 
        height:20px; 
        vertical-align: middle;
        animation: blink 1s infinite steps(1, start) 
    } 
    @keyframes blink { 
        0%{ background-color: white; } 
        50% { background-color: #6666; } 
        100% { background-color: white; }
    }

这样就实现了手机支付密码的效果了。