Parfois, vous rencontrerez des champs de formulaire similaires à ceux ci-dessus. Nous pouvons limiter la longueur d'entrée pour chaque champ et changer automatiquement la mise au point lorsque la longueur d'entrée est atteinte pour améliorer la facilité de forme
La copie de code est la suivante:
<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 = "soumi" value = "soumi">
</ form>
La copie de code est la suivante:
(fonction () {
fonction tabForward (e) {
E = E || Window.Event;
var Target = E.Target || E.Srcelement;
if (target.value.length === cible.maxLength) {
var form = cible.form;
pour (var i = 0, len = form.elements.length; i <len; i ++) {
if (form.Elements [i] === Target) {
if (form.elements [i ++]) {
form.elements [i ++]. focus ();
}
casser;
}
}
}
}
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);
}) ();
Le code est en fait très simple. Focus suivant.
Parlons brièvement de deux attributs:
La propriété Target.Form pointe du formulaire auquel le champ actuel appartient.
L'attribut Form.Elements Elements est une collection de tous les éléments de forme (champs) sous une forme. Cette collection d'éléments est une liste ordonnée contenant tous les champs de la forme, tels que <fort>, <TextArea>, <Fut-Button> et <FielDset>. Chaque champ de formulaire est dans l'ordre dans lequel ils apparaissent dans les balises dans le même ordre qu'elles peuvent être accessibles par des attributs d'emplacement et de nom. Par exemple:
La copie de code est la suivante:
var form = document.getElementById ("myform");
var textbox1 = form.elements [0];
var textbox2 = form.elements ["tel2"];
Enfin, jetons un coup d'œil au code ci-dessus et constatons qu'il y a encore des problèmes, comme ce code
La copie de code est la suivante:
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);
Trouvé non, nous avons ajouté le même gestionnaire d'événements à chaque champ. Si vous utilisez cette méthode pour chaque élément dans une application Web complexe, il y aura en conséquence d'innombrables codes pour ajouter des gestionnaires d'événements. Pour le moment, la délégation de l'événement peut être utilisée pour résoudre ce problème
L'autre code reste inchangé.
La copie de code est la suivante:
var form = document.getElementById ("myform");
form.addeventListener ("keyup", tabForward, false);
Alors, quelle est la commission de l'événement?
La délégation d'événements tire parti des bulles d'événements et spécifie uniquement un gestionnaire d'événements pour gérer tous les événements d'un certain type. Par exemple, pour l'événement KETYUP ici, il vous suffit de spécifier un gestionnaire d'événements OnkeyUp à l'élément de formulaire, sans ajouter d'événements à chaque champ.