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

前端之家收集整理的这篇文章主要介绍了JS实现六位字符密码输入器功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

老规矩~ 上DEMO,过过瘾先:

再上源码:

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

一. 先说原理

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

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

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

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

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

很简单吧~

二. 码代码

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

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

= this.maxLength){ this.realInput.value = real_str.substring(0,6); this.callback(); } }

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

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

以上所述是小编给大家介绍的JS实现六位字符密码输入器功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章