Este artículo implementa una interfaz similar a la contraseña de pago de Alipay, que solo puede ingresar números y solo se pueden ingresar 6 dígitos.
Primero, déjame mostrarte las representaciones. Si se siente bien, consulte el código de implementación.
1. Hoja de estilo
.wrap{margin: 10px auto;width: 329px;height: 640px;padding-top: 200px;}.inputBoxContainer{width: 240px;height: 50px;margin: 0 auto;position: relative;}.inputBoxContainer .bogusInput{width: 100%;height: 100%;border: #c3c3c3 1px sólido; border-radio: 7px; -Moz-border-radius: 7px; -webkit-border-radio: 7px; desbordamiento: oculto; posición: absoluto; z-index: 0;}. inputBoxContainer .Realinput {ancho: 100%; altura: 100%; posición: absoluta; superior: 0; izquierda: 0; Z-index. 1; filtro: alfa (opacidad = 0);-moz-opacidad: 0; opacidad: 0;}. InputBoxContainer .BoGUSInput Entrada {Padding: 0; ancho: 16.3%; altura: 100%; float: izquierda; fondo: #ffffff; text-align: Center; Font-Size: 20px; Border: Ninguno; Border-Right: #C3C3C3 C3 1 Solid;}. InputBoxContainer .BoGUSInput Entrada: Last-Child {Border: Ninguno;}. ConfirmButton {Width: 240px; Height: 45px; Border-Radius: 7px; -Moz-Border-Radius: 7px; -Webkit-Border-Radius: 7px; fondo: #f4f4f4; border: #d5d5d5d5 1px; bloque; font-size: 16px; margen: 30px automático; margen-bottom: 20px;}. showValue {ancho: 240px; altura: 22px; línea de línea: 22px; font-size: 16px; text-align: centro; margen: 0 auto;}2. Código HTML
<div> <div id = "inputboxContainer"> <input type = "text"/> <div> <input type = "contraseña" maxLength = "6" deshabilitado/> <input type = "contraseña" maxlength = "6" deshabilitado/> <input type = "contraseña" maxlength = "6" deshabilitado/> <input type = "contraseña" maxlength = "6" desactivado/> <bassword "contraseña" contraseña "contraseña" 6 "deshabilitado" deshabilitado " maxLength = "6" Discabled/> <input type = "contraseña" maxlength = "6" deshabilitado/> <input type = "contraseña" maxLength = "6" desactivado/> <input type = "contraseña" maxlength = "6" deshabilitado/> <input type = "contraseña" maxLenggth = "6" desactivado/> <contraseña de entrada = "contraseña" contraseña "contraseña" contraseña "=" 6 "" DISPONTACIÓN "DISPONTACIÓN" DISPONTACIÓN "DISPONTACIÓN" DISPONTACION " maxLength = "6" Discabled/> <input type = "contraseña" maxlength = "6" deshabilitado/> <input type = "contraseña" maxlength = "6" desactivado/</div> </div> <botón id = "confirmarbutton"> ver </button> <p id = "showvalue"> </p> </div>
3. Efecto lógico de control de código JS
(function () {var contenedor = document.getElementById ("inputBoxContainer"); boxInput = {maxLength: "", RealInput: "", BogusInput: "", BogusInputarr: "", Callback: ",", init: function (diversa) {var that = this; this.callback = fun; that.Realinput. Container.children [1]; que.bogusInputarr = that.bogusinput.children; function () {that.setValue ();}}, setValue: function () {this.realinput.value = this.realinput.value.replace (// d/g, "); console.log (this.realinput.value.replace (// d/g,")) var real = 0; real_str.substring (0,6); this.callback ();}}, getboxInputValue: function () {var realvalue = ""; for (var i en this.bogusInputarr) {if (! this.bogusinputarr [i] .value) {rompe;} realvalue += this.bogusinputarr [I]. realValue;}}}}) () boxInput.init (function () {getValue ();}); document.getElementById ("confirmButton"). onClick = functer () {getValue ();} function getValue () {document.getByById ("showValue").Lo anterior es el cuadro de entrada de contraseña de pago Alipay basado en JS introducido 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!