JavaScript实现淘宝京东6位数字支付密码效果-创新互联

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

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、网站建设、外贸网站建设、克州网络推广、小程序开发、克州网络营销、克州企业策划、克州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；创新互联公司为所有大学生创业者提供克州建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

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

  

     //小圆点
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

本文名称：JavaScript实现淘宝京东6位数字支付密码效果-创新互联
本文URL：http://shouzuofang.com/article/dejggp.html