微客导航 » 文章资讯 » JavaScript实现淘宝京东6位数字支付密码效果

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

2023-09-08 20:42:05 275

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

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



//小圆点

CSS样式

css样式自己定义就行，想要什么样式自己写～～～注意几个关键点

dot初始状态为隐藏状态
input输入框为绝对定位，覆盖在6个密码块上，设置为透明

.input-ps{
position:relative;
display:flex;
align-items:center;
width:8.28125rem;
height:1.375rem;
margin:0auto;
border:1pxsolid#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:1pxsolid#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节点
*/
vardom={
$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(){
varmima;
//正则判断输入的值是否全是数字
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=6){
//TODO这里写业务逻辑代码
//模拟密码
if(mima=="123456"){
//TODO这里写业务逻辑代码
}

}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐