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


Posted in Javascript onAugust 18, 2018

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

  • 只能输入数字
  • 只能输入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 相关文章推荐
Javascript select下拉框操作常用方法
Nov 09 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
详解Angular6 热加载配置方案
Aug 18 #Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 #Javascript
vue下history模式刷新后404错误解决方法
Aug 18 #Javascript
详解javascript appendChild()的完整功能
Aug 18 #Javascript
vue中的自定义分页插件组件的示例
Aug 18 #Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 #Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
javascript随机变色实例代码
2019/10/15 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
使用python实现BLAST
2018/02/12 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
python访问hdfs的操作
2020/06/06 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
20年同学聚会感言
2014/02/03 职场文书
《自然之道》教学反思
2014/02/11 职场文书
学期评语大全
2014/04/30 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang