HTML：使用label控制样式
CSS：设置input透明
JS：input输入时，让label中<li>显示"•"；
点击密码框清除密码。
实现效果如图：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 7 <style> 8 ul{ 9 list-style: none; 10 } 11 .passwordLabel{ 12 height: 30px; 13 clear: both; 14 } 15 .passwordLabel li{ 16 float: left; 17 width: 30px; 18 height: 30px; 19 line-height: 30px; 20 text-align: center; 21 border: 1px solid #dedede; 22 margin-left: -1px; 23 } 24 .passwordDiv input{ 25 width: 1px; 26 height: 1px; 27 opacity: 0; 28 border: 0; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="passwordDiv"> 34 <label for="ipt" class="passwordLabel"> 35 <ul> 36 <li></li> 37 <li></li> 38 <li></li> 39 <li></li> 40 <li></li> 41 <li></li> 42 </ul> 43 </label> 44 <input type="password" id="password" name="password" maxlength="6" > 45 </div> 46 <script> 47 //密码框输入事件 48 $('.passwordDiv input').on('input', function(e) { 49 var number = 6; 50 var pw = $("input[name = 'password']").val(); 51 var list = $('.passwordDiv ul li'); 52 for(var i = 0; i < number; i++) { 53 if(pw[i]) { 54 $(list[i]).text('•'); 55 } else { 56 $(list[i]).text(''); 57 }; 58 }; 59 }); 60 //点击密码框清除密码 61 $('.passwordDiv ul').click(function() { 62 $("input[name = 'password']").val(''); 63 $('#password').focus(); 64 $('.passwordDiv ul li').text('') 65 }); 66 </script> 67 </body> 68 </html>