JavaScript-Tastaturereignisse sind ein Chaos — Hier ist die Tastenkodierung, die Sie sich bookmarken werden

In Ihrem JavaScript-Karrieren kommt zu einem Zeitpunkt, wo Sie sich darauf vorbereiten, eine Tasteneingabe zu verarbeiten. Einfach genug. Sie öffnen MDN und finden nicht eine, nicht zwei, sondern vier verschiedene Eigenschaften, die Sie verwenden könnten: keyCode, which, keyund code. Drei davon sind veraltet. Keine davon stimmt vollständig überein, was ein „Taste“ ist. Glückwunsch – Sie sind nun an einem der chaotischsten historischen Eckpunkte des Web erreicht.

Diese Referenz durchschneidet den Rausch. Sie lernen, welche Eigenschaften Sie verwenden und welche Sie vermeiden sollten, und erhalten eine vollständige Tabelle mit gängigen Tastenwerten, sodass Sie nicht raten müssen.

Die vier Eigenschaften – und warum es vier gibt

JavaScript-Tastaturereignisse bieten mehrere Eigenschaften auf dem Ereignisobjekt. Hier ist, was jedes eine tatsächlich ist:

Eigentum	Was es zurückgibt	Status
event.key	Eine menschenlesbare Zeichenkette wie "Enter", "ArrowUp", oder "a"	✅ Verwenden Sie dies
event.code	Die physische Tastenidentifikation, z. B. "KeyA", "Digit1", "ArrowLeft"	✅ Verwenden Sie dies für die Layout-unabhängige Erkennung
event.keyCode	Eine numerische Code, z. B. 13 für Enter	⚠️ Veraltet – vermeiden Sie in neuen Code
event.which	Die gleiche numerische Wert wie keyCode	⚠️ Veraltet – vermeiden Sie in neuen Code

keyCode und which sind grundsätzlich das gleiche Ding aus verschiedenen Epochen der Browsergeschichte. Beide liefern eine ganze Zahl, die die Taste darstellt. Beide sind veraltet. Beide funktionieren weiterhin in allen Browsern, weshalb Sie sie in Codebasen finden, die vor 2015 entstanden sind.

Warum keyCode Veraltet, aber überall vorhanden

keyCode war die ursprüngliche Methode, um Tasteneingaben im Browser-DOM zu erkennen, zurück bis zu Netscapes früheren Ereignismodellen. Es funktionierte – größtenteils – aber hatte ernsthafte Inkonsistenzen: Die gleiche Taste konnte in verschiedenen Browsern unterschiedliche Codes liefern, Großbuchstaben wurden nicht einheitlich behandelt und nicht-ASCII-Tasten waren ein Chaos.

Der W3C hat formell keyCode und which im DOM Level 3 Events Spezifikation (2016) in Bezug auf key und codeabgelöst.

Die Folge: alte Codebasen sind voll von event.keyCode === 13 Prüfungen, Stack Overflow-Antworten aus dem Jahr 2012 empfehlen es und Sie finden es in Produktionscode überall. Es wird nicht bald verschwinden – Sie sollten es einfach nicht schreiben neuen Code, der es verwendet.

event.key vs event.code — Welche von beiden benötigen Sie?

Dies ist die Unterscheidung, die die meisten Menschen verletzt. Beide sind modern und beide korrekt – sie beantworten jedoch unterschiedliche Fragen.

• Verwenden Sie event.key Wenn Sie darauf achten, welchen Zeichen der Benutzer absichtlich eingeben möchte. Auf einem US-Tastatur drückt Shift + 2 und liefert Ihnen event.key === "@". Auf einer deutschen Tastatur liefert die gleiche physische Taste ein anderes Zeichen. event.key spiegelt das tatsächliche logische Ergebnis wider.
• Verwenden Sie event.code Wenn Sie darauf achten, welche physische Taste gedrückt wurde, unabhängig von der Tastaturanordnung. Dies ist das, was Sie für Spielsteuerungen, Tastenkombinationen, die nicht mit der Sprache des Benutzers verändert werden sollen, oder alles, was „die Q-Taste“ bedeutet – nicht das Zeichen Q – benötigen.

Für die meisten praktischen Anwendungsfälle – Formularabgaben, Dialogabbruch, Hotkeys – event.key ist das, was Sie benötigen. Für Spielsteuerungen und positionbasierte Tastenkombinationen, greifen Sie auf event.code.

zu.

Richtiges Verarbeiten von Tasten in modernem JavaScript

Hier ist, wie Sie häufige Fälle korrekt behandeln:

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // handle Enter
  }
});

Eingabetaste (Formularabgabe, Bestätigungsdialoge)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});

Escape-Taste (Modale schließen, Aktion abbrechen)

document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowUp':    moveUp();    break;
    case 'ArrowDown':  moveDown();  break;
    case 'ArrowLeft':  moveLeft();  break;
    case 'ArrowRight': moveRight(); break;
  }
});

Pfeiltasten (Navigation, Slider, Spielsteuerungen)

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

Verwenden Sie e.ctrlKey, e.shiftKey, e.altKeyund e.metaKey (Cmd auf Mac) um Tastenkombinationen zu erkennen. Diese sind nicht veraltet und funktionieren genau wie erwartet.

Vollständige Tastenreferenztabelle

Die Tabelle unten deckt die Tasten ab, die Sie am häufigsten benötigen. Für alles, was hier nicht aufgeführt ist, verwenden Sie das Tastenwert-Info-Tool – drücken Sie eine Taste und erhalten Sie sofort die genaue event.key, event.codeund die veraltete keyCode Werte.

Taste	event.key	event.code	keyCode (veraltet)
Einführung	"Enter"	"Enter"	13
Maskieren	"Escape"	"Escape"	27
Raum	" " (Raum)	"Space"	32
Tab	"Tab"	"Tab"	9
Backspace	"Backspace"	"Backspace"	8
Delete	"Delete"	"Delete"	46
Pfeil nach oben	"ArrowUp"	"ArrowUp"	38
Pfeil nach unten	"ArrowDown"	"ArrowDown"	40
Pfeil nach links	"ArrowLeft"	"ArrowLeft"	37
Pfeil nach rechts	"ArrowRight"	"ArrowRight"	39
Heim	"Home"	"Home"	36
Ende	"End"	"End"	35
Seite nach oben	"PageUp"	"PageUp"	33
Seite nach unten	"PageDown"	"PageDown"	34
F1	"F1"	"F1"	112
F2	"F2"	"F2"	113
F3	"F3"	"F3"	114
F4	"F4"	"F4"	115
F5	"F5"	"F5"	116
F6	"F6"	"F6"	117
F7	"F7"	"F7"	118
F8	"F8"	"F8"	119
F9	"F9"	"F9"	120
F10	"F10"	"F10"	121
F11	"F11"	"F11"	122
F12	"F12"	"F12"	123
Shift (links)	"Shift"	"ShiftLeft"	16
Ctrl (links)	"Control"	"ControlLeft"	17
Alt (links)	"Alt"	"AltLeft"	18
Cmd / Win	"Meta"	"MetaLeft"	91
Caps Lock	"CapsLock"	"CapsLock"	20
a–z (klein)	"a"–"z"	"KeyA"–"KeyZ"	65–90
0–9 (obere Reihe)	"0"–"9"	"Digit0"–"Digit9"	48–57
0–9 (Numpad)	"0"–"9"	"Numpad0"–"Numpad9"	96–105

Die Tastenkombination, die Sie nicht merken können – suchen Sie sie live auf

Keine Referenztabelle deckt alle Tasten für alle Tastaturlayouts ab. Wenn Sie die genauen Werte für eine Taste benötigen, die Sie nicht sicher wissen – eine Numpad-Taste, eine Mediataste, eine regionale Zeichenkombination – ist die schnellste Methode, diese zu drücken und zu sehen.

Der Tastenwert-Info-Tool tut genau das. Drücken Sie eine Taste und sehen Sie sofort event.key, event.code, event.keyCodeund event.which – plus die Modifizierzustände. Keine Kopieren von MDN, keine Vermutung, was „NumpadEnter“ tatsächlich heißt.

Die kurze Version

• Verwenden Sie event.key für die meisten Tastenverarbeitungen – es ist lesbar, modern und lokalisiert.
• Verwenden Sie event.code Wenn die physische Tastenposition wichtiger ist als das Zeichen (Spielsteuerungen, positionbasierte Tastenkombinationen).
• Schreiben Sie keine neuen Code, der event.keyCode oder event.whichverwendet. Sie funktionieren, aber sie sind veraltet und weniger vorhersagbar.
• Wenn Sie alte Code finden, der keyCode === 13verwendet, bedeutet das Enter. keyCode === 27 bedeutet Escape. Die Tabelle oben hat den Rest.
• Für eine Taste, die Sie in keiner Referenz finden, drücken Sie sie im Tastenwert-Info-Tool und erhalten sofort die Antwort.

Das könnte Ihnen auch gefallen