Wie binde ich Pfeiltasten in JavaScript und jQuery?

Tastenkombinationen für Pfeiltasten in JavaScript und jQuery

Um Benutzerinteraktionen zu verbessern, ist es häufig erforderlich, Funktionen an bestimmte Tasten zu binden. Pfeiltasten werden häufig für die Navigation verwendet, ihre Integration in JavaScript und jQuery kann jedoch eine Herausforderung darstellen.

jQuery-Lösung

Während das js-hotkey-Plugin eine verbesserte Tastenkombination bietet Funktionen, es fehlt die Unterstützung für Pfeiltasten. Der Keydown-Ereignishandler von jQuery bietet jedoch eine alternative Lösung.

<code class="js">$(document).keydown(function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

Reine JavaScript-Lösung

Die Verwendung des Onkeydown-Ereignisses von JavaScript ist ein weiterer Ansatz zur Tastenbelegung von Pfeiltasten.

<code class="js">document.onkeydown = function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
};</code>

Browserübergreifende Kompatibilität

Für die Kompatibilität mit älteren Browsern wie IE8 fügen Sie e = e || hinzu window.event; switch(e.which || e.keyCode) { vor dem Funktionskörper.

Moderne Lösung

KeyboardEvent.which ist jetzt veraltet. Ein modernerer Ansatz ist die Verwendung von KeyboardEvent.key:

<code class="js">document.addEventListener('keydown', function(e) {
    switch (e.key) {
        case 'ArrowLeft':
            // Insert your left arrow key code
            break;
        case 'ArrowUp':
            // Insert your up arrow key code
            break;
        case 'ArrowRight':
            // Insert your right arrow key code
            break;
        case 'ArrowDown':
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

Das obige ist der detaillierte Inhalt vonWie binde ich Pfeiltasten in JavaScript und jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!