前端之家收集整理的这篇文章主要介绍了
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
//小圆点
获取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";
})
/**
* 隐藏的输入框输入值的事件
* 判断输入的值中是否都是数字
* 如果都是数字，<a href="https://www.jb51.cc/tag/jiequ/" target="_blank" class="keywords">截取</a>最前面6位数字
* 如果不全是数字，将输入框中的值设置空
* 遍历dot点，将和输入框内值的长度一致的dot个数<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>出来
*
*/
dom.$input_mima.addEventListener("input",function(){
var mima ;
//正则判断输入的值是否全是数字
if(/^[0-9]*$/.test(this.value)){
mima = this.value.substring(0,6); //<a href="https://www.jb51.cc/tag/jiequ/" target="_blank" class="keywords">截取</a>输入框中值的前6个字符
this.value = mima; //将输入框中的值设置位<a href="https://www.jb51.cc/tag/jiequ/" target="_blank" class="keywords">截取</a>到的值
}else{
mima = "";
this.value = mima; //将输入框的值设置位空
}
//遍历圆点dot，将index小于密码长度的圆点<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>出来。这里我是用的mui框架的遍历<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>，如果你用的不是mui框架，可以换成其他的方式遍历，下面有一个原生JS的循环<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>
mui(".dot").each(function(index){
if(index < mima.length){
this.style.display = "block";
}else{
this.style.display = "none";
}
})
//原生的循环<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a> - ，-
// 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 这里写业务逻辑<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>
//模拟密码
if(mima == "123456"){
//TODO 这里写业务逻辑<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>
}
}
})
