JS实现六位字符密码输入器功能

153 阅读 0 评论 101 点赞

我是靠谱客的博主酷酷宝贝，最近开发中收集的这篇文章主要介绍JS实现六位字符密码输入器功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

老规矩~ 上DEMO，过过瘾先：六位字符密码输入器

再上源码：六位字符密码输入器

从DEMO中我看可以看出，首先只能输入六个字符，并且仅允许输入数字，在输入六位数字完成之后会自动执行一个回调（DEMO中是将输入结果显示出来了）

一. 先说原理

首先呢，我们需要两个东东：其一是一个真是的输入框，即：真正处于焦点状态并获取用户输入的input；其二是一组伪输入框，即：并没有真正获取焦点，但只是显示了当前输入的值（当然啦，密码嘛，只有一个小黑点而已~）。

其次呢，我们需要简单不惧一下，让着一组（6个）伪造元素刚好重叠在真实输入框的下方。如下：

边距实际是没有的啦~，途中只是为了看着更清晰一些。

另外，我们需要把顶层的真是输入框opcity设为0，这样其实呈现在用户面前的就是这一组伪造的输入框啦。

但是用户其实再输入的时候还是对真是输入框进行操作，在之后我们在讲用户的输入依次填写到伪造输入框里边就可以喽~

很简单吧~

二. 码代码

首先初始化各个DOM，以及绑定输入事件。

function init(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();
}
}

然后在用户输入时分别将用户输入输入到伪造输入框中

function setValue(){
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();
}
}

最后我们输入密码当然是要获取的啦~，来一个获取最终值的方法~

function getBoxInputValue(){
var realValue = "";
for(var i in this.bogusInputArr){
if(!this.bogusInputArr[i].value){
break;
}
realValue += this.bogusInputArr[i].value;
}
return realValue;
}

以上所述是小编给大家介绍的JS实现六位字符密码输入器功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！