JS实现6位数字支付密码输入框：仿淘宝京东效果

功能需求分析

京东和淘宝的密码输入框主要包含以下功能点：

限制只能输入数字字符。
限制最大输入长度为6位字符。
每输入一个字符，对应位置的小黑点（圆点）即时显示。
每删除一个字符，对应位置的小黑点即时消失。

实现思路详解

实现思路如下：

1、首先编写包含6位密码显示区域的静态HTML结构和CSS样式。 2、将实际的<input>元素通过绝对定位覆盖在静态UI区域之上，并将其透明度设置为0，使其视觉上不可见。 3、当<input>获得焦点时，浏览器默认会显示光标。为解决此问题，可采用两种方案：一是尝试用CSS隐藏光标，但存在兼容性问题；二是将<input>定位到屏幕可视区域之外（如top: -10000px），用户无法看到输入框及闪烁的光标，从而提升体验。 4、限制仅输入数字：通过正则表达式校验，若用户输入非数字字符，则清空<input>的值。 5、限制长度：当输入超过6位时，截取<input>.value的前6位字符赋值回<input>，确保其长度始终不超过6。 6、同步圆点显示：遍历代表圆点的元素，若圆点的索引小于<input>.value的长度，则显示该圆点。 7、优化删除体验：若直接清空<input>值，删除时需多次按键才能看到圆点消失。因此，始终将截取后的6位字符串（不足6位时即为当前值）赋值给<input>，保持其长度与圆点显示逻辑一致。

HTML与CSS结构

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样式部分可根据需求自定义，需注意以下关键点：

dot元素初始状态为隐藏（display: none）。

input输入框采用绝对定位（position: absolute），覆盖在6个密码块之上，并通过opacity: 0设置为透明。


.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;
}

JavaScript交互逻辑

JavaScript脚本逻辑如下：


/**
     * 获取dom节点
     */
    var dom = {
      $input_mima : document.getElementById("input-mima")      //隐藏起来的密码输入框
    }

    /**
     * 隐藏的密码输入框获得焦点事件
     * 输入框获得焦点后，将输入框的定位定到屏幕看不见的位置
     */
    dom.$input_mima.addEventListener("focus",function(){
      this.style.top = "-10000px";
    })
    /**
     * 隐藏的密码输入框失去焦点事件
     * 输入框失去焦点后，将输入框的定位定原来的位置
     */
    dom.$input_mima.addEventListener("blur",function(){
      this.style.top = "0";
    })
    /**
     * 隐藏的输入框输入值的事件
     * 判断输入的值中是否都是数字
     * 如果都是数字，截取最前面6位数字
     * 如果不全是数字，将输入框中的值设置空
     * 遍历dot点，将和输入框内值的长度一致的dot个数显示出来
     *
     */
    dom.$input_mima.addEventListener("input",function(){
      var mima ;
      //正则判断输入的值是否全是数字
      if(/^[0-9]*$/.test(this.value)){
        mima = this.value.substring(0,6); //截取输入框中值的前6个字符
        this.value = mima;         //将输入框中的值设置位截取到的值
      }else{
        mima = "";
        this.value = mima;         //将输入框的值设置位空
      }
      //遍历圆点dot，将index小于密码长度的圆点显示出来。这里我是用的mui框架的遍历方法，如果你用的不是mui框架，可以换成其他的方式遍历，下面有一个原生JS的循环方法
      mui(".dot").each(function(index){
        if(index < mima.length){
          this.style.display = "block";
        }else{
          this.style.display = "none";
        }
      })
      //原生的循环方法 - ，-
      // var dot_list = document.getElementsByClassName("dot");
      // for(var index =0;index<dot_list.length;index++){
      //   if(index < mima.length){
      //     dot_list[index].style.display = "block";
      //   }else{
      //     dot_list[index].style.display = "none";
      //   }
      // }

      //输入的密码达到6位之后判断密码是否正确，这边模拟了一下正确密码是123456的情况
      //密码正确之后进行你想要的操作
      //如果不希望输入的密码字符达到6位后自动进行业务逻辑的代码，这部分可以不写，将你的业务逻辑绑定到别的节点
      if(mima.length >=6){
        //TODO 这里写业务逻辑代码
        //模拟密码
        if(mima == "123456"){
          //TODO 这里写业务逻辑代码
        }

      }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

JavaScript实现淘宝京东风格6位数字支付密码输入框

功能需求分析

实现思路详解

HTML与CSS结构

JavaScript交互逻辑

实用工具推荐