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 相关文章推荐
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
js实现数组转换成json
Jun 26 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
关于使用js算总价的问题
Jun 23 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
canvas 中如何实现物体的框选
Aug 05 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
Display SQL Server Version Information
2007/06/21 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
javascript闭包入门示例
2014/04/30 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Python三元运算实现方法
2015/01/12 Python
Python+django实现文件下载
2016/01/17 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
后勤岗位职责
2013/11/26 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
三问三解心得体会
2014/09/05 职场文书
个人汇报材料范文
2014/12/30 职场文书
总经理岗位职责
2015/02/04 职场文书
2015年度物流工作总结
2015/04/30 职场文书