input依次输入密码

原理：
　　一个真正的可以输入的input框，opacity： 0，设定位层级；（视图不可见的）
　　再来6（n）个input，readyonly,用来显示，type为password，设置好样式；（视图可见的）
　　代码如下：
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>手机端六位密码输入</title>
        <script src="http://zeptojs.com/zepto.min.js"></script>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }
            
            input {
                border: none;
                outline: none;
                background: none;
            }
            
            #pwd-box {
                width: 310px;
                height: 48px;
                position: relative;
                border: 1px solid #9f9fa0;
                border-radius: 3px;
                overflow: hidden;
                margin: 10px auto;
            }
            
            #pwd-box input[type="number"] {
                width: 100%;
                height: 100%;
                color: transparent;
                /*letter-spacing 属性增加或减少字符间的空白,字间距*/
                letter-spacing: 35px;
                position: absolute;
                top: 0;
                left: 0;
                border: none;
                font-size: 18px;
                filter: alpha(opacity=0);
                -moz-opacity: 0;
                -khtml-opacity: 0;
                opacity: 0;
                z-index: 1;
                outline: none;
            }
            
            #pwd-box .fake-box {
                width: 100%;
                height: 100%;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-flow: row;
                -ms-flex-flow: row;
                flex-flow: row;
            }
            
            #pwd-box .fake-box input {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                width: 100%;
                height: 100%;
                border: none;
                border-right: 1px solid #e5e5e5;
                text-align: center;
                font-size: 30px;
                float: left;
            }
            
            #pwd-box .fake-box input:nth-last-child(1) {
                border: none;
            }
        </style>
    </head>

    <body>
        <div id="pwd-box">
            <input type="number" maxlength="6" class="pwd-input" id="pwd-input" autofocus>
            <div class="fake-box">
                <input type="password" readonly="">
                <input type="password" readonly="">
                <input type="password" readonly="">
                <input type="password" readonly="">
                <input type="password" readonly="">
                <input type="password" readonly="">
            </div>
        </div>
        <script>
            $("#pwd-input").on("input", function() {
                // trim(): 去两边空格的方法；
                var pwd = $(this).val().trim();
                var len = pwd.length;
                for(var i = 0; i < len; i++) {
                    $(".fake-box input").eq(i).val(pwd[i]);
                }
                $(".fake-box input").each(function() {
                    var index = $(this).index();
                    if(index >= len) {
                        $(this).val("");
                    }
                });
                if(len == 6) {
                    //执行其他操作 
                    setTimeout(function() {
                        alert('订单已提交')
                    }, 300)

                }
                if(len > 6) {
                    pwd = pwd.substr(0, 6);
                    $(this).val(pwd);
                    len = 6;
                }
            });
        </script>
    </body>

</html>
posted on 2017-04-24 12:04 梦幻飞雪阅读(306) 评论(0) 收藏举报