仿支付宝微信支付密码框

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>