Das Formular wechselt automatisch den Fokus, wenn die Eingabelänge erreicht ist. Javascript-Kenntnisse
WBOY
Freigeben： 2016-05-16 16:53:13
Original
974 Leute haben es durchsucht
Manchmal werden Sie auf Formularfelder stoßen, die den oben genannten ähneln. Wir können die Eingabelänge für jedes Feld begrenzen und den Fokus automatisch wechseln, wenn die Eingabelänge erreicht ist, um die Benutzerfreundlichkeit des Formulars zu verbessern
Code kopieren Der Code lautet wie folgt:
Code kopieren Der Code lautet wie folgt:
(function () {
function tabForward(e) {
e = e ||.
var target = e.srcElement;
if (target.value.length === target.maxLength) {
var form = target.form;
for (var i = 0, len = form.elements.length; i < len; i ) {
if (form .elements[i] = == target) {
if (form.elements[i ]) {
form.elements[i ].focus();
break; }
}
}
var textbox1 = document.getElementById("txt1");
var textbox2 = document.getElementById("txt2"); textbox3 = document.getElementById( "txt3");
textbox1.addEventListener("keyup", tabForward, false);
textbox2.addEventListener("keyup", tabForward, false); .addEventListener("keyup" , tabForward, false);
})();
Der Code bestimmt, ob die Länge der Eingabezeichenfolge gleich ist auf die Länge des maxLength-Attributs des Ereignisziels. Wenn dies der Fall ist und ein nächstes Feld im Formular vorhanden ist, wechselt es automatisch zum nächsten Fokus.
Lassen Sie uns kurz über die folgenden beiden Attribute sprechen:
target.form Das Formularattribut zeigt auf den Zeiger auf das Formular, zu dem das aktuelle Feld gehört.
function tabForward(e) {
e = e ||.
var target = e.srcElement;
if (target.value.length === target.maxLength) {
var form = target.form;
for (var i = 0, len = form.elements.length; i < len; i ) {
if (form .elements[i] = == target) {
if (form.elements[i ]) {
form.elements[i ].focus();
break; }
}
}
var textbox1 = document.getElementById("txt1");
var textbox2 = document.getElementById("txt2"); textbox3 = document.getElementById( "txt3");
textbox1.addEventListener("keyup", tabForward, false);
textbox2.addEventListener("keyup", tabForward, false); .addEventListener("keyup" , tabForward, false);
})();
Der Code bestimmt, ob die Länge der Eingabezeichenfolge gleich ist auf die Länge des maxLength-Attributs des Ereignisziels. Wenn dies der Fall ist und ein nächstes Feld im Formular vorhanden ist, wechselt es automatisch zum nächsten Fokus.
Lassen Sie uns kurz über die folgenden beiden Attribute sprechen:
target.form Das Formularattribut zeigt auf den Zeiger auf das Formular, zu dem das aktuelle Feld gehört.
Das Elementattribut form.elements ist das Formular. Eine Sammlung aller Formularelemente (Felder) in . Die Elementsammlung ist eine geordnete Liste, die alle Felder im Formular enthält, z. B. ,