Erkennung von Pfeiltastendrücken in JavaScript

Question

Wie erkenne ich, wenn eine der Pfeiltasten gedrückt wird? Ich habe das hier benutzt, um es herauszufinden:

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

Es funktionierte zwar bei allen anderen Tasten, aber nicht bei den Pfeiltasten (vielleicht weil der Browser standardmäßig auf diesen Tasten blättern soll).

Answer 1

Pfeiltasten werden nur ausgelöst durch onkeydown , nicht onkeypress .

Die Schlüsselcodes sind:

• links = 37
• auf = 38
• rechts = 39
• unten = 40

Answer 2

Anruffunktion auf der Taste nach oben und unten. Für jede Taste gibt es unterschiedliche Codes.

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

}

Answer 3

Event.key === "PfeilRechts"...

Neuer und viel sauberer: Verwendung event.key . Keine willkürlichen Zahlencodes mehr! Wenn Sie transpilieren oder wissen, dass Ihre Benutzer alle moderne Browser benutzen, verwenden Sie dies!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

Ausführliche Behandlung:

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

Moderne Schalterbedienung:

const callback = {
    "ArrowLeft"  : leftHandler,
    "ArrowRight" : rightHandler,
    "ArrowUp"    : upHandler,
    "ArrowDown"  : downHandler,
}[event.key]
callback?.()

HINWEIS: Die alten Eigenschaften ( .keyCode y .which ) sind veraltet.

"w", "a", "s", "d" für die Richtung, verwenden Sie event.code

Um Benutzer zu unterstützen, die nicht das englische Tastaturlayout verwenden, sollten Sie stattdessen event.code . Dadurch bleibt die physische Position des Schlüssels erhalten, auch wenn sich das Zeichen ändert.

event.key wäre , über Dvorak und z auf Azerty, wodurch Ihr Spiel unspielbar wird.

const {code} = event
if (code === "KeyW") // KeyA, KeyS, KeyD

Optimal ist es, wenn Sie auch die Umbelegung von Tasten zulassen, was dem Spieler unabhängig von seiner Situation zugute kommt.

P.S. event.code ist derselbe für Pfeile

key Mozilla-Dokumente

code Mozilla-Dokumente

Unterstützte Browser

Answer 4

Möglicherweise die knappste Formulierung:

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 38:
            alert('up');
            break;
        case 39:
            alert('right');
            break;
        case 40:
            alert('down');
            break;
    }
};

Demo (dank des Benutzers Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

Dies sollte browserübergreifend funktionieren. Hinterlassen Sie einen Kommentar, wenn es in einem bestimmten Browser nicht funktioniert.

Es gibt noch andere Möglichkeiten, den Tastencode zu erhalten (e.which, e.charCode und window.event anstelle von e), aber sie sollten nicht notwendig sein. Sie können die meisten von ihnen ausprobieren unter http://www.asquare.net/javascript/tests/KeyCode.html . Beachten Sie, dass event.keycode nicht mit onkeypress in Firefox funktioniert, wohl aber mit onkeydown.

Answer 5

Utilice keydown , nicht keypress für nicht druckbare Tasten wie z. B. Pfeiltasten:

function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;

Die beste JavaScript-Schlüssel-Ereignis-Referenz, die ich gefunden habe (schlagen die Hosen aus quirksmode, zum Beispiel) ist hier: http://unixpapa.com/js/key.html