Wie gehe ich mit Pfeiltasteneingaben in JavaScript mithilfe von Schlüsselereignissen um?

Verarbeiten von Pfeiltasteneingaben in Javascript mithilfe von Schlüsselereignissen

Das Erkennen und Verarbeiten von Eingaben über Pfeiltasten kann für verschiedene Szenarien in der Webentwicklung nützlich sein. Dies kann durch die integrierten Funktionen zur Verarbeitung von Schlüsselereignissen des Browsers erreicht werden.

Lösung mit Javascript-Schlüsselereignissen:

Der bereitgestellte Javascript-Code nutzt document.onkeydown Ereignishandler, der auf Tastendrücke wartet. Wenn eine Taste gedrückt wird, wird die Eigenschaft event.which verwendet, um den Tastencode zu ermitteln. Pfeiltastencodes entsprechen den folgenden Werten:

• Pfeil nach links: 37
• Pfeil nach oben: 38
• Pfeil nach rechts: 39
• Pfeil nach unten : 40

Die switch-Anweisung verarbeitet diese Tastencodes und ermöglicht Ihnen, Ihre benutzerdefinierte Logik für jeden Tastendruck zu definieren.

Detaillierte Implementierung:

<code class="javascript">document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>

Zusätzliche Überlegungen:

• Für die Unterstützung von Internet Explorer 8 ändern Sie den Anfang der Funktion wie folgt: e = e || window.event; switch(e.which || e.keyCode) {}
• Ab 2020 ist KeyboardEvent.which veraltet. Für eine modernere Lösung verwenden Sie KeyboardEvent.key:

<code class="javascript">document.onkeydown = function(e) {
    switch(e.key) {
        case "ArrowLeft": // left
        break;

        case "ArrowUp": // up
        break;

        case "ArrowRight": // right
        break;

        case "ArrowDown": // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>

Das obige ist der detaillierte Inhalt vonWie gehe ich mit Pfeiltasteneingaben in JavaScript mithilfe von Schlüsselereignissen um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!