JavaScript实现淘宝京东6位数字支付密码效果

京东淘宝的密码输入框功能点

实现思路

1、写好6位密码输入框的静态样式和html结构
2、将密码输入框input定位到父容器，覆盖之前写好的6位密码输入框区域，并设置为透明
3、虽然设置了密码输入框为透明，但当密码输入框获得焦点的时候，输入框的光标会显示出来，并不是透明状态。为了解决这个问题，暂时想到了两种方法，第一种，利用css将光标也设置为透明，不过这种方法有一定的兼容问题；第二种，当输入框获得焦点的时候，将输入框定位到屏幕外面，用户看不到输入框，自然也就看不到光标在那里一闪一闪了。
4、对于用户只能输入数字的功能，这里用正则表达式就搞定了，如果用户输入了非数字字符，将input输入框的值清空
5、对于用户输入超过6位字符的情况，利用字符串的截取方法截取input.value的前6位字符
6、循环遍历圆点，将index小于input.value.length的圆点显示出来
7、用户输入超过6个的数字的时候，你再去删除，你会发现要删除很多字符，那些小圆点才会相应的消失，所以这里，将截取的6位字符赋值给input输入框的值，让input.value长度永远小于等于6

HTML结构

父容器 input-ps 用于input输入框的定位
一位密码对应一个input-ps-item和dot

<div class="input-ps">  <div class="input-ps-item">    <span class="dot"></span> //小圆点  </div>  <div class="input-ps-item">    <span class="dot"></span>  </div>  <div class="input-ps-item">    <span class="dot"></span>  </div>  <div class="input-ps-item">    <span class="dot"></span>  </div>  <div class="input-ps-item">    <span class="dot"></span>  </div>  <div class="input-ps-item last">    <span class="dot"></span>  </div>  <input id="input-mima" class="input-mima" type="text"/></div>

CSS样式

css样式自己定义就行，想要什么样式自己写～～～注意几个关键点

dot初始状态为隐藏状态
input输入框为绝对定位，覆盖在6个密码块上，设置为透明

.input-ps{  position: relative;  display: flex;  align-items: center;  width: 8.28125rem;  height: 1.375rem;  margin: 0 auto;  border: 1px solid #d9d9d9;  border-radius: 0.1875rem;  background-color: #fff;}.input-ps-item{  display: flex;  justify-content: space-around;  align-items: center;  flex: 1;  height: 0.78125rem;  border-right: 1px solid #d9d9d9;}.last{  border: none;}.dot{  display: none;  width: 0.234375rem;  height: 0.234375rem;  border-radius: 0.234375rem;  background-color: #363e49;}.input-mima{  position: absolute;  left: 0;  top: 0;  height: 1.375rem !important;  color: transparent;  opacity: 0;}