模拟支付宝密码输入功能，ios上光标隐藏（网上找的在ios上光标还是会显示，进行了改进）

<div class="pwd-box">  
            <input type="tel" maxlength="6" class="pwd-input" id="pwd-input">  
            <div class="fake-box">  
                <input type="number" readonly="">  
                <input type="number" readonly="">  
                <input type="number" readonly="">  
                <input type="number" readonly="">  
                <input type="number" readonly="">  
                <input type="number" readonly="">  
            </div>  
        </div>

css样式

.pwd-box{
    width:100%;
    padding-left: 1px;
    position: relative;
    border: 1px solid #9f9fa0;
    border-radius: 3px;
    over-flow:hidden
}
.pwd-box input[type="tel"]{
    width: 135%;/*让主要的输入框input宽度宽于显示密码的div*/
    height: 55px;
    color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    font-size: 18px;
    opacity: 0;
    z-index: 1;
    letter-spacing: 35px;
    text-indent: -999em; /*文本向左缩进，不让光标出现在视野内*/
    opacity: 0;
    margin-left: -100px;/*让input向左移动100px,只要移出屏幕外就行，让光标不出现*/
}
.fake-box input{
    width: 15.3%;
    height: 48px;
    border: none;
    border-right: 1px solid #e5e5e5;
    text-align: center;
    font-size: 30px;
    display: inline-block;
    padding: 0;
    margin: 0;
    background: #fff;
}
.fake-box input:nth-last-child(1){
    border:none;
}

js代码

    <script type="text/javascript">
        function myFunction(){
            console.log('此功能点击时让光标至内容的最后，好让删除时 从最后一位数字删除')
            var t=$("#pwd-input").val();
            $("#pwd-input").val("").focus().val(t);
        }
    </script>
<script type="text/javascript">
        var $input = $(".fake-box input");  
            $("#pwd-input").on("input", function() {  
                var pwd = $(this).val().trim();  

                    var reg=new RegExp(/^[0-9]*$/);
                        if(!(reg.test(pwd))){
                            return false;
                        }
                                console.log('pwd',pwd)
                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) {  
                }  
            }); 
            </script>