Ich habe vor einiger Zeit HTML und CSS gelernt, mich für diesen Bereich interessiert und begann, in JavaScript (dritte Ausgabe) fortgeschrittene Programmierung zu lernen. Ich habe heutzutage gelernt und gerade den Inhalt von Ereignissen und Formskripten gelernt. Vor ein paar Tagen bat mich der Lehrer, ein Stück Code zu schreiben: Verwenden Sie in einem JavaScript -Formular die Eingabetaste und die Moving -Tasten nach links und rechts, um den Fokus von einem Textfeld auf das vorherige oder nächste Textfeld zu verschieben. Ich habe versucht, Code mit dem Wissen zu schreiben, das ich bisher gelernt habe. Ich hatte beim Schreiben mehrere Schwierigkeiten: Modulberechnung; Verwenden Sie diese und Argumente, um das Triggerereignis in der Funktion zu finden. Verwenden Sie die Methode addHandler (), um dem Ereignis Ereignishandler hinzuzufügen. Mit Hilfe des Lehrers habe ich die oben genannten Probleme gelöst. Ich hatte das Gefühl, dass ich durch diesen Code viel Wissen gelernt hatte, also schrieb ich einen Kommentar, nachdem ich ihn aussortet und veröffentlicht hatte.
Die Codekopie lautet wie folgt:
<html>
<head Lang = "en">
<meta charset = "utf-8">
<title> </title>
</head>
<body>
<form>
<Div> <Eingabe type = "text"> </div>
<Div> <Eingabe type = "text"> </div>
<Div> <Eingabe type = "text"> </div>
<Div> <Eingabe type = "text"> </div>
<Div> <Eingabe type = "text"> </div>
<Div> <Eingabe type = "subieren"> </div>
</form>
<Script>
Funktion is_down (e) {
var isdown;
e = e || Fenster.Event;
Switch (e.keycode) {
Fall 13: // Taste eingeben
Fall 39: // Bewegen Sie den Schlüssel nach rechts
Fall 40: // Taste nach unten bewegen
isdown = true;
brechen;
Fall 37: // Bewegen Sie den Schlüssel nach links
Fall 38: // Key aufsteigen
isdown = false;
brechen;
}
return isdown;
}
Funktion KEY_UP () {
// beim Aufrufen der Funktion generiert die Funktion selbst und Argumente
// Verwenden Sie dies und Argumente, um das Feld zu finden und Ereignisse auszulösen
var e = Argumente [1];
return is_down (e) === undefiniert? Richtig: Handle_Element (this, is_down (e));
}
Funktion handle_element (field, is_down) {
var Elements = field.form.elements;
für (var i = 0, len = elements.length-1; i <len; i ++) {
if (field == Elemente [i]) {
brechen;
}
}
i = is_down? (i + 1) % len: (i - 1) % len;
// (0 === i && is_down) -> Drücken
// (-1 === i &&! Is_down)-> Drücken Sie die UP-Taste, nachdem sich das erste Textfeld konzentriert hat
if ((0 === i && is_down) || (-1 === i &&! is_down)) {
zurückkehren;
}
Elemente [i] .focus ();
var element_arr = ['button', 'subieren', 'reset', 'select-one', 'textarea'];
if (element_arr.join (','). Indexof (Elemente [i] .type)> -1)
Elemente [i] .Select ();
false zurückgeben;
}
// Abbrechen das Standard -Einreichungsformular Ereignis eingeben
document.onkeydown = function (e) {
e = e || Fenster.Event;
if (e.keycode == 13) {
e.PreventDefault? e.preventDefault (): (e.returnValue = false);
}
};
// addEventListener und AttachEvent (dh) über Browser erkennen
Funktion addHandler (Element, Typ, Handler) {
if (element.addeventListener)
Element.AdDeVentListener (Typ, Handler, Falsch);
sonst wenn (element.attachevent)
Element.attacheAvent ("on" + Typ, Handler);
anders
Element ["on" + Typ] = Handler;
}
var Elements = document.Forms [0] .Em;
für (var i = 0, len = elements.length; i <len; i ++) {
// Fügen Sie den Ereignishandler von KEY_UP für das KeyUp -Ereignis hinzu
addHandler (Elemente [i], "keyUp", key_up);
}
</script>
</body>
</html>
Das obige ist der gesamte Inhalt des Codes. Ich persönlich bin der Meinung, dass das Schreiben ziemlich umfassend ist und alle Dinge, die berücksichtigt werden sollten, verarbeitet werden. Ich hoffe, es mag alle.