jquery 移动端 六位密码输入

<!DOCTYPE html>  
<html>  
<head>  

<script src="scripts/jquery-1.7.1.min.js"></script>

  <title>手机端六位密码输入</title>  
<style>  
.pwd-box{  
        310px;  
        padding-left: 1px;  
        position: relative;  
        border: 1px solid #9f9fa0;  
        border-radius: 3px;  
overflow:hidden  
    }  
    .pwd-box input[type="tel"]{  
         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{  
         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;  
    }  
</style>  
</head>  
<body>  
<div class="pwd-box">  
    <input type="tel" maxlength="6" class="pwd-input" >  
    <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>  
$(function(){
    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) {  
                    //执行其他操作  
                }  
            });  
})

</script>  
</body>  
</html>

原文地址:https://www.cnblogs.com/arealy/p/7737249.html