本文介绍如何使用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实现六位字符密码输入器功能，希望对大家有所帮助，如有疑问请留言，小编会及时回复。在此非常感谢大家对本站的支持！