标签：
把下面代码添加到该添加的地方就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: 1rem 10 } 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: 35px 24 } 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: transparent 34 } 35 36 .fake-box input:nth-last-child(1) { 37 border: 0 38 }
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/
标签：
原文地址：http://www.cnblogs.com/wteng/p/5432153.html
