JS实现六位字符密码输入器功能
本文介绍如何使用JavaScript实现一个六位字符的密码输入器。核心原理是通过隐藏真实输入框并叠加一组伪输入框,限制仅允许数字输入。当用户输入满六位时自动触发回调函数,适用于需要高安全性或简洁界面的移动端及Web端密码输入场景。
JS实现六位字符密码输入器功能
常规操作,先展示演示效果:六位字符密码输入器
接着提供源代码:六位字符密码输入器
观察演示可知,限制只能输入六个字符,且仅允许数字,输入满六位后自动触发回调(演示中为显示结果)。
一、原理说明
需要两个元素:一个是真实输入框,用于获取焦点和用户输入;另一个是一组伪输入框,不获取焦点,仅显示当前输入值(密码形式显示为小黑点)。
其次,简单布局使这组(6个)伪元素恰好覆盖在真实输入框下方,布局如下:
实际边距为零,图中仅为视觉清晰。
此外,将顶层真实输入框的透明度设为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实现六位字符密码输入器功能,希望对大家有所帮助,如有疑问请留言,小编会及时回复。在此非常感谢大家对本站的支持!
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
