HTML手写键盘 (单密码框)

先上图

粘贴图片.png

大致原理：先用css画出整个键盘 ，并没有input框，如果使用input实现效果，则需要多个input，这样的后果是需要多次调用键盘，影响整体的体验，用ul li画出密码框效果，随着按键，对密码进行消失隐藏操作html如下：
<div class="keyBoard keyBoard1"> <p>输入支付密码</p> <div class="psd" id="firstPsd"> <ul> <li>![](img/dian.png)</li> <li>![](img/dian.png)</li> <li>![](img/dian.png)</li> <li>![](img/dian.png)</li> <li>![](img/dian.png)</li> <li>![](img/dian.png)</li> </ul> </div> <div class="keyBoardNum keyBoardNum1"> <p ng-click="goTo('/sendCode')">忘记密码？</p> <ul class="keyBoardUl"> <li class="number number1"><a href="">1</a></li> <li class="number number1"><a href="">2</a></li> <li class="number number1"><a href="">3</a></li> <li class="number number1"><a href="">4</a></li> <li class="number number1"><a href="">5</a></li> <li class="number number1"><a href="">6</a></li> <li class="number number1"><a href="">7</a></li> <li class="number number1"><a href="">8</a></li> <li class="number number1"><a href="">9</a></li> <li class="cancelNum" style="color: #666;background: #f7f7f7;font-size: 0.4rem">取消</li> <li class="number number1"><a href="">0</a></li> <li id="del1" style="background: #f7f7f7">![](img/tuige.png)</li> </ul> </div> </div>

---

js部分：首先定义一个变量用来存放显示隐藏的密码图片的下标，定义数组是为了存放密码，

点击数字 i 为密码框下标，下标从0开始，将获取到的点击的数字放在数组中，同时根据下标来显示隐藏密码
当i 为6时，将数组拼接成一个6为密码的字符串
点击删除图标，删除数组最后一位，并且隐藏密码图标。
var i=0; arr=[] $('.number1').click(function (){ if (i>=0&&i<=5) { arr.push(($(this)[0].innerText)) $('.mima1').eq(i).css('display','block') i++; } if (i==6) { var str=arr.join('') console.log('密码：'+str) } }) $('#del1').click(function (){ if (i>0&&i<=6) { arr.pop(); i--; $('.mima1').css('display','none') for (var j = i-1; j >= 0; j--) { $('.mima1').eq(j).css('display','block') } } })

效果图

粘贴图片.png

点的图片请自行下载