Manchmal begegnen Sie Formfelder, die den oben genannten ähnlich sind. Wir können die Eingangslänge für jedes Feld einschränken und den Fokus automatisch schalten, wenn die Eingangslänge erreicht ist, um die Leichtigkeit der Form zu verbessern
Die Codekopie lautet wie folgt:
<form id = "myForm">
<Eingabe type = "text" name = "tel1" id = "txt1" maxLength = "3">-
<Eingabe type = "text" name = "tel2" id = "txt2" maxLength = "3">--
<Eingabe type = "text" name = "tel3" id = "txt3" maxLength = "4">
<br>
<input type = "surug" value = "subieren">
</form>
Die Codekopie lautet wie folgt:
(function () {
Funktion tabforward (e) {
e = e || Fenster.Event;
var target = e.target || e.srcelement;
if (target.value.length === target.maxLength) {
var form = target.form;
für (var i = 0, len = form.elements.length; i <len; i ++) {
if (form.elements [i] === Ziel) {
if (form.elements [i ++]) {
Form.elemente [i ++]. Focus ();
}
brechen;
}
}
}
}
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);
}) ();
Der Code ist tatsächlich sehr einfach. Nächster Fokus.
Lassen Sie uns kurz über zwei Attribute sprechen:
Die Eigenschaft von Target.Form verweist auf das Formular, zu dem das aktuelle Feld gehört
Das Formular von Form.Lements Elements ist eine Sammlung aller Formularelemente (Felder) in einem Formular. Diese Sammlung von Elementen ist eine geordnete Liste, die alle Felder im Formular enthält, wie z. Jedes Formularfeld befindet sich in der Reihenfolge, in der sie in den Tags in derselben Reihenfolge erscheinen, auf die sie über Ort und Namensattribute zugreifen können. Zum Beispiel:
Die Codekopie lautet wie folgt:
var form = document.getElementById ("myForm");
var textbox1 = Form.elemente [0];
var textbox2 = Form.Elements ["tel2"];
Schauen wir uns schließlich den obigen Code an und stellen Sie fest, dass es immer noch einige Probleme gibt, wie beispielsweise diesen Code
Die Codekopie lautet wie folgt:
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);
NEIN gefunden, wir haben jedem Feld denselben Ereignis -Handler hinzugefügt. Wenn Sie diese Methode für jedes Element in einer komplexen Webanwendung verwenden, gibt es unzählige Codes für das Hinzufügen von Ereignishandlern. Zu diesem Zeitpunkt kann die Ereignisdelegation verwendet werden, um dieses Problem zu lösen
Der andere Code bleibt unverändert.
Die Codekopie lautet wie folgt:
var form = document.getElementById ("myForm");
Form.AdDeVentListener ("KeyUp", tabforward, false);
Was ist dann die Kommission der Veranstaltung?
Die Ereignisdelegation nutzt Ereignisblasen und gibt nur einen Ereignishandler an, um alle Ereignisse eines bestimmten Typs zu verwalten. Zum Beispiel müssen Sie für das KeyUp -Ereignis hier nur einen OnkeyUp -Ereignis -Handler für das Formularelement angeben, ohne jedem Feld Ereignisse hinzuzufügen.