A veces encontrarás campos de forma similares a los anteriores. Podemos limitar la longitud de entrada para cada campo y cambiar automáticamente el enfoque cuando se alcanza la longitud de entrada para mejorar la facilidad de forma
La copia del código es la siguiente:
<Form ID = "MyForm">
<input type = "text" name = "tel1" id = "txt1" maxLength = "3">--
<input type = "text" name = "tel2" id = "txt2" maxLength = "3">--
<input type = "text" name = "tel3" id = "txt3" maxLength = "4">
<br>
<input type = "enviar" valor = "enviar">
</form>
La copia del código es la siguiente:
(función () {
función tabforward (e) {
e = e || window.event;
Var Target = E.Target ||
if (target.value.length === Target.maxLength) {
var form = target.form;
para (var i = 0, len = form.elements.length; i <len; i ++) {
if (form.elements [i] === Target) {
if (form.elements [i ++]) {
form.elements [i ++]. focus ();
}
romper;
}
}
}
}
var textbox1 = document.getElementById ("txt1");
var textbox2 = document.getElementById ("txt2");
var textbox3 = document.getElementById ("txt3");
textbox1.adDeventListener ("KeyUp", TabForward, False);
textbox2.AdDeventListener ("KeyUp", Tabforward, False);
textbox3.AdDeventListener ("KeyUp", Tabforward, False);
}) ();
El código es realmente muy simple. Siguiente enfoque.
Hablemos brevemente de dos atributos:
La propiedad de formulario Target.Form apunta al formulario al que pertenece el campo actual.
El atributo Form.Elements Elements es una colección de todos los elementos de formulario (campos) en una forma. Esta colección de elementos es una lista ordenada que contiene todos los campos en el formulario, como <input>, <xtexarea>, <botton> y <scieldset>. Cada campo de formulario está en el orden en que aparecen en las etiquetas en el mismo orden a los que se puede acceder mediante atributos de ubicación y nombre. Por ejemplo:
La copia del código es la siguiente:
var form = document.getElementById ("myForm");
var textbox1 = form.elements [0];
var textbox2 = form.elements ["Tel2"];
Finalmente, echemos un vistazo al código anterior y descubramos que todavía hay algunos problemas, como este código
La copia del código es la siguiente:
var textbox1 = document.getElementById ("txt1");
var textbox2 = document.getElementById ("txt2");
var textbox3 = document.getElementById ("txt3");
textbox1.adDeventListener ("KeyUp", TabForward, False);
textbox2.AdDeventListener ("KeyUp", Tabforward, False);
textbox3.AdDeventListener ("KeyUp", Tabforward, False);
Encontramos que no, agregamos el mismo controlador de eventos a cada campo. Si usa este método para cada elemento en una aplicación web compleja, como resultado habrá innumerables códigos para agregar controladores de eventos. En este momento, la delegación del evento se puede usar para resolver este problema
El otro código permanece sin cambios.
La copia del código es la siguiente:
var form = document.getElementById ("myForm");
form.adDeventListener ("KeyUp", Tabforward, False);
Entonces, ¿cuál es la comisión del evento?
La delegación de eventos aprovecha las burbujas de eventos, y solo especifica un controlador de eventos para administrar todos los eventos de cierto tipo. Por ejemplo, para el evento de clave aquí, solo necesita especificar un controlador de eventos OnKeyUp al elemento de formulario, sin agregar eventos a cada campo.