標籤：
把下面代碼添加到該添加的地方就OK了 ， 2333
Html
1 <html> 2 <head></head> 3 <body> 4 <div class="pwd-box" id="sixpwd"> 5 <input type="tel" maxlength="6" class="pwd-input" id="pwd-input" /> 6 <div class="fake-box"> 7 <input type="password" readonly="" /> 8 <input type="password" readonly="" /> 9 <input type="password" readonly="" /> 10 <input type="password" readonly="" /> 11 <input type="password" readonly="" /> 12 <input type="password" readonly="" /> 13 </div> 14 </div>15 </body>16 </html>
css
1 .pwd-box { 2 width: 95%; 3 padding-left: 1px; 4 position: relative; 5 border: 1px solid #cdcdcd; 6 border-radius: 3px; 7 over-flow: hidden; 8 margin: 0 auto; 9 margin-bottom: 1rem10 }11 12 .pwd-box input[type="tel"] {13 width: 100%;14 height: 48px;15 color: transparent;16 position: absolute;17 top: 0;18 left: 0;19 border: 0;20 font-size: 18px;21 opacity: 0;22 z-index: 1;23 letter-spacing: 35px24 }25 26 .fake-box input {27 width: 15.111%;28 height: 48px;29 border: 0;30 border-right: 1px solid #cdcdcd;31 text-align: center;32 font-size: 30px;33 background-color: transparent34 }35 36 .fake-box input:nth-last-child(1) {37 border: 038 }
js
1 <script> 2 var $input = $(".fake-box input"); 3 $("#pwd-input").on("input", function() { 4 var pwd = $(this).val().trim(); 5 for (var i = 0, len = pwd.length; i < len; i++) { 6 $input.eq("" + i + "").val(pwd[i]); 7 } 8 $input.each(function() { 9 var index = $(this).index(); 10 if (index >= len) { 11 $(this).val(""); 12 } 13 }); 14 if (len == 6) { 15 //執行其他動作 16 } 17 }); 18 </script>
參考1：原文1 ，http://blog.csdn.net/qiuqingpo/article/details/50070183
參考2： 純js css，http://jsfiddle.net/pj7dvLdu/
手機端輸入6位密碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
