2024年04月11日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客
最近上班做项目，需要用到一个类似支付宝/微信支付时候的密码输入框，这种输入框需要判断很多，只能输入数字，并且从第一位输入，如果输入字母会不显示（也就是没输入，为空，直到输入数字才可以），第一位输入完成之后光标进入第二位，以此类推，并且删除又要从输入的最后一位开始删除，不能指定某个位置来进行删除...具体效果如上方，大家可利用下方代码来查看...
本次代码特别感谢 温柔、善良、可爱、漂亮的小姐姐“小母”的帮助，下方是完整代码，大家可自行使用。
效果用于手机端最佳，样式大家自行修改。
<style type="text/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;
}
.showValue{
width: 240px;
height: 22px;
line-height: 22px;
font-size: 16px;
text-align: center;
margin: 0 auto;
}
</style><body> <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> <!-- 显示输入的密码 --> <p class="showValue" id="showValue"></p> </div> </body>
<script>
(function(){
var container = document.getElementById("inputBoxContainer");
boxInput = {
maxLength:"",
realInput:"",
bogusInput:"",
bogusInputArr:"",
callback:"",
init:function(fun){
//this指的是对象boxInput
var that = this;
this.callback = fun;
that.realInput = container.children[0];
//大input框
that.bogusInput = container.children[1];
//六个小input框
that.bogusInputArr = that.bogusInput.children;
//得到第一个小Input框的maxlength的值
that.maxLength = that.bogusInputArr[0].getAttribute("maxlength");
//当在大Input里输入值时执行的函数
that.realInput.oninput = function(){
that.setValue();
}
//oninput的兼容写法
that.realInput.onpropertychange = function(){
that.setValue();
}
},
setValue:function(){
// \D：意思是匹配一个非数字字符。当在大Inputk框里输入的是非数字字符时，用空字符串代替，即不显示
this.realInput.value = this.realInput.value.replace(/\D/g,"");
//获取大Input框的值
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();
});
function getValue(){
document.getElementById("showValue").innerText = boxInput.getBoxInputValue();
}
</script>本文链接：http://so.lmcjl.com/news/1757/