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

我之所以要赞美你,更重要的是因为:你还哺育春天的的摇篮。 "冬天来了,春天还会远吗? "在冬天里,思想被提纯了,一直被坚定了,力量在储蓄着。一旦春风拂面,一切更争先恐后,生气勃勃,万紫千红,千姿百态。仿佛含苞的花蕾忽然绽开。

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

  • 只能输入数字
  • 只能输入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;
}

JS脚本

/**
     * 获取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位数字支付密码效果。只有正直、忠诚、宽容和拥有仁爱之心的人才能够达到真正意义上的成功。不具备这些品质的人,就无法体会到成功的滋味,因为成功和幸福一样,不在于外在的富有,而在于内心的感受。更多关于JavaScript实现淘宝京东6位数字支付密码效果请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
使用Ajax、json实现京东购物车结算界面的数据交互实例

js实现京东秒杀倒计时功能

仿京东快报向上滚动的实例

jQuery实现仿京东防抖动菜单效果示例

JavaScript实现京东购物放大镜和选项卡效果的方法分析