原生JS实现支付宝风格6位数字密码输入框

实现原理与效果展示

本文旨在展示一种使用JavaScript构建的界面效果，该界面模拟了支付宝支付密码输入的功能，限制用户只能输入数字，且最大输入长度固定为6位。

首先展示最终实现的视觉效果，若效果符合预期，可参考后续提供的具体实现代码。

第一步是定义相关的CSS样式表，用于控制输入框的外观和布局。

.wrap{
margin: 10px auto;
width: 329px;
height: 640px; 
padding-top: 200px;
}
.inputBoxContainer{
width: 240px;
height: 50px;
margin: 0 auto;
position: relative;
}
.inputBoxContainer .bogusInput{
width: 100%;
height: 100%;
border: #c3c3c3 1px solid;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
overflow: hidden;
position: absolute;
z-index: 0;
}
.inputBoxContainer .realInput{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
z-index: 1;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
.inputBoxContainer .bogusInput input{
padding: 0;
width: 16.3%;
height: 100%;
float:left;
background: #ffffff;
text-align: center;
font-size: 20px;
border: none;
border-right: #C3C3C3 1px solid;
}
.inputBoxContainer .bogusInput input:last-child{
border: none;
}
.confirmButton{
width: 240px;
height: 45px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
background: #f4f4f4;
border: #d5d5d5 1px solid;
display: block;
font-size: 16px;
margin: 30px auto;
margin-bottom: 20px;
}
.showValue{
width: 240px;
height: 22px;
line-height: 22px;
font-size: 16px;
text-align: center;
margin: 0 auto;
}

第二步是编写HTML结构代码，构建输入框的基本骨架。

<div class="wrap">
<div class="inputBoxContainer" id="inputBoxContainer">
<input type="text" class="realInput"/>
<div class="bogusInput">
<input type="password" maxlength="6" disabled/>
<input type="password" maxlength="6" disabled/>
<input type="password" maxlength="6" disabled/>
<input type="password" maxlength="6" disabled/>
<input type="password" maxlength="6" disabled/>
<input type="password" maxlength="6" disabled/>
</div>
</div>
<button id="confirmButton" class="confirmButton">查看</button>
<p class="showValue" id="showValue"></p>
</div>

第三步是使用JavaScript代码控制交互逻辑，实现数字输入和显示效果。

(function(){
var container = document.getElementById("inputBoxContainer");
boxInput = {
maxLength:"",
realInput:"",
bogusInput:"",
bogusInputArr:"",
callback:"",
init:function(fun){
var that = this;
this.callback = fun;
that.realInput = container.children[0];
that.bogusInput = container.children[1];
that.bogusInputArr = that.bogusInput.children;
that.maxLength = that.bogusInputArr[0].getAttribute("maxlength");
that.realInput.oninput = function(){
that.setValue();
}
that.realInput.onpropertychange = function(){
that.setValue();
}
},
setValue:function(){
this.realInput.value = this.realInput.value.replace(/\D/g,"");
console.log(this.realInput.value.replace(/\D/g,""))
var real_str = this.realInput.value;
for(var i = 0 ; i < this.maxLength ; i++){
this.bogusInputArr[i].value = real_str[i]?real_str[i]:"";
}
if(real_str.length >= this.maxLength){
this.realInput.value = real_str.substring(0,6);
this.callback();
}
},
getBoxInputValue:function(){
var realValue = "";
for(var i in this.bogusInputArr){
if(!this.bogusInputArr[i].value){
break;
}
realValue += this.bogusInputArr[i].value;
}
return realValue;
}
}
})()
boxInput.init(function(){
getValue();
});
document.getElementById("confirmButton").onclick = function(){
getValue();
}
function getValue(){
document.getElementById("showValue").innerText = boxInput.getBoxInputValue();
}

以上即为基于JavaScript实现仿支付宝风格6位数字密码输入框的完整介绍，希望能为读者提供有益参考。如有任何疑问，欢迎留言交流，小编将及时回复。同时感谢大家对本站的支持！