Ich habe vor einiger Zeit HTML und CSS gelernt und mich für diesen Aspekt interessiert. Ich habe auch angefangen, JavaScript Advanced Programming (dritte Ausgabe) zu lernen, und habe gerade etwas über Ereignisse und Formularskripte gelernt. Vor ein paar Tagen bat mich der Lehrer, einen Code zu schreiben: Verwenden Sie in einem Javascript-Formular die Eingabetaste und die Auf-, Ab-, Links- und Rechts-Tasten, um den Fokus von einem Textfeld zum vorherigen oder nächsten Text zu verschieben Kasten. Bei der Anwendung der bisher erlernten Kenntnisse stieß ich während des Schreibvorgangs auf mehrere Schwierigkeiten: Modulo-Berechnung mit dieser und Argumenten innerhalb der Funktion, um das auslösende Ereignis zu finden, um einen Ereignishandler hinzuzufügen die Veranstaltung. Mit Hilfe des Lehrers habe ich die oben genannten Probleme gelöst. Ich habe das Gefühl, dass ich durch diesen Code viel Wissen gelernt habe, daher werde ich nach Fertigstellung Kommentare schreiben und veröffentlichen.
<script><br>
Funktion is_down(e) {<br>
var isDown;<br>
e = e || window.event;<br>
Schalter (e.keyCode) {<br>
Fall 13: //Enter-Taste<br>
Fall 39: //Taste nach rechts bewegen<br>
Fall 40: //Taste nach unten bewegen<br>
isDown = true;<br>
Pause;<br>
Fall 37: //Taste nach links bewegen<br>
Fall 38: //Nach-oben-Taste<br>
isDown = false;<br>
Pause;<br>
}<br>
return isDown;<br>
}<br>
Funktion key_up(){<br>
//Beim Aufruf einer Funktion generiert die Funktion selbst diese und Argumente<br>
//Verwenden Sie dies und Argumente, um das Feld bzw. das ausgelöste Ereignis zu finden<br>
var e=arguments[1];<br>
return is_down(e) === undefiniert ? true : handle_element(this, is_down(e));<br>
}<br>
Funktion handle_element(field, is_down) {<br>
var elements = field.form.elements;<br>
for (var i = 0, len = elements.length-1; i < len; i ) {<br />
If (field == elements[i]) {<br />
Pause;<br />
}<br />
}<br />
i = is_down ? (i 1) % len : (i - 1) % len;<br />
//(0===i && is_down) --> Nachdem das letzte Textfeld den Fokus erhält, drücken Sie die Abwärtstaste <br>
//(-1===i && !is_down) --> Nachdem das erste Textfeld den Fokus erhält, drücken Sie die Aufwärtstaste <br>
If((0===i && is_down)||(-1===i && !is_down)){<br>
return true;<br>
}<br>
elements[i].focus();<br>
var element_arr = ['button', 'submit', 'reset', 'select-one', 'textarea'];<br>
If (element_arr.join(',').indexOf(elements[i].type) > -1)<br>
elements[i].select();<br>
return false;<br>
}<br>
//Das standardmäßige Übermittlungsformularereignis bei Eingabe abbrechen<br>
document.onkeydown = function(e) {<br>
e = e || window.event;<br>
If(e.keyCode == 13) {<br>e.preventDefault ? e.preventDefault() : (e.returnValue = false);<br>
}<br>
};<br>
//Browserübergreifende Erkennung addEventListener und attachmentEvent(IE)<br>
function addHandler(element, type, handler) {<br>
if (element.addEventListener)<br>
element.addEventListener(type, handler, false);<br>
else if (element.attachEvent)<br>
element.attachEvent("on" type, handler);<br>
sonst<br>
element["on" type] = handler;<br>
}<br>
var elements = document.forms[0].elements;<br>
for (var i = 0, len = elements.length; i < len; i ) {<br />
//key_up-Ereignishandler für keyup-Ereignis hinzufügen<br />
addHandler(elements[i], "keyup", key_up);<br />
}<br />
</script>
Das Obige ist der gesamte Inhalt des Codes. Ich persönlich finde, dass der Text ziemlich umfassend ist und alle Stellen, die berücksichtigt werden sollten, behandelt wurden.
