Las viejas reglas ~ Cuando vaya a la demostración, se divertirá primero: un dispositivo de entrada de contraseña de carácter de seis dígitos
Luego agregue el código fuente: Entrada de contraseña de caracteres de seis dígitos
Desde la demostración, puedo ver que primero, solo se pueden ingresar seis caracteres, y solo se permite ingresar números. Después de completar la entrada de seis dígitos, se ejecutará automáticamente una devolución de llamada (el resultado de la entrada se muestra en demostración)
1. Hablemos primero sobre el principio
En primer lugar, necesitamos dos cosas: una es un cuadro de entrada real, es decir, está realmente enfocado y obtiene la entrada de entrada de entrada del usuario; El otro es un conjunto de cuadros de entrada pseudo, es decir, realmente no obtiene el foco, pero solo muestra el valor ingresado actualmente (por supuesto, la contraseña es solo un pequeño punto negro ~).
En segundo lugar, debemos ser simples y no temerlo, lo que permite que un conjunto de (6) elementos falsos se superponga justo debajo del cuadro de entrada real. como sigue:
En realidad, no hay margen ~, solo para verlo más claramente.
Además, necesitamos establecer el cuadro de entrada real de nivel superior Opcity en 0, de modo que el que se presenta al usuario es este conjunto de cuadros de entrada falsos.
Sin embargo, cuando el usuario vuelve a entrar, todavía opera en el cuadro de entrada real. Después de eso, llenaremos la entrada del usuario en el cuadro de entrada forjado a su vez ~
Muy simple ~
2. Código Código
Primero, el DOM individual se inicializa y el evento de entrada está vinculado.
función init (diversión) {var that = this; this.callback = divertir; that.realInput = Container.Children [0]; que.BogusInput = Container.Children [1]; That.BogusInputarr = that.BogusInput.Children; que.maxLengthy = That.BogusInputoRr [0] .getAttribute ("MaxlInpy"; = function () {that.setValue ();} that.realinput.onpropertychange = function () {that.setValue ();}}Luego, cuando se ingresa la entrada del usuario, la entrada del usuario se ingresa en el cuadro de entrada forjada respectivamente
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.maxl longitud; 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 ();}}Finalmente, necesitamos obtener la contraseña ~, obtengamos un método para obtener el valor final ~
función getboxInputValue () {var realvalue = ""; para (var i en this.bogusInputarr) {if (! this.bogusInputarr [i] .value) {break;} realValue += this.bogusinputarr [i] .value;} return RealValue;}Lo anterior es la implementación JS de la función de entrada de contraseña de caracteres de seis dígitos introducida por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!