Ein Benutzer drückt Escape, und das Modal schließt sich nicht. Er betätigt Enter im Suchfeld, und nichts passiert. Kommt Ihnen das bekannt vor? Die Tastatursteuerung in JavaScript wirkt einfach, bis man es mit drei Events, einem Dutzend Eigenschaften und einem Zoo von Browser-Unterschieden zu tun bekommt.

Jedes keydown oder keyup erzeugt ein KeyboardEvent-Objekt mit zwei Dutzend Feldern. Einige sind seit der IE-Ära veraltet, andere verhalten sich in Firefox und Chrome unterschiedlich. Und die MDN-Dokumentation ist gespickt mit „Nicht verwenden"-Hinweisen. Entwickler brauchen keine weitere Spezifikation, sondern einen Spickzettel, der funktioniert.

Nachfolgend finden Sie eine vollständige Referenz zu Tastatur-Events: von der Anatomie des KeyboardEvent bis zu gebrauchsfertigen Snippets für Hotkeys. Setzen Sie ein Lesezeichen auf die Code-Tabelle, Sie werden sie in fast jedem Projekt benötigen.

💡 Kurzüberblick:

• Verwenden Sie keydown statt keypress: Es funktioniert für beliebige Tasten.
• event.key liefert das Symbol der Taste, event.code gibt den physischen Code zurück.
• event.keyCode und event.which sind veraltet, verwenden Sie sie nicht in neuem Code.
• Die folgende Tabelle sammelt die Codes für alle Standardtasten in modernen Browsern.

Was in KeyboardEvent steckt

Wenn ein Benutzer eine beliebige Taste drückt, erzeugt der Browser ein KeyboardEvent-Objekt, einen Nachkommen von UIEvent, das wiederum das Basis-Event erweitert. Darin enthalten sind die Eigenschaften der Taste, der Zustand der Modifikatoren und Layout-Informationen.

Die Spezifikation für UI Events entwickelt sich weiter: Neue Eigenschaften kommen hinzu, alte werden als veraltet markiert. Die wesentliche Änderung der letzten Jahre ist die Abkehr von numerischen Codes (keyCode / charCode / which) zugunsten von event.key und event.code. Alle modernen Browser unterstützen dieses Paar, und Sie sollten Ihre Logik darauf aufbauen.

Die Browser-Unterstützung ist nahezu vollständig: Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Wenn Ihr Projekt nicht an IE11 gebunden ist, können Sie event.which vergessen.

Drei Events: keydown, keypress und keyup

Der Browser unterscheidet drei Tastatur-Events. Die Auslösereihenfolge ist festgelegt:

• keydown, Taste wird gedrückt (Moment des Kontakts);
• keypress, Taste wird gehalten und erzeugt ein Zeichen (nur für Zeichentasten);
• keyup, Taste wird losgelassen.

Das Abonnieren von keydown per addEventListener:

1
const input = document.getElementById('type-here');
2
 
3
input.addEventListener('keydown', function (event) {
4
  console.log('Нажата:', event.key, '| Код:', event.code);
5
});

Für Inline-Handler verwenden Sie ein Element-Attribut:

1
<input type="text" id="type-here" onkeyup="handleKey(event)">

Wenn Sie das Event-Objekt in der Konsole ausgeben, sehen Sie die vollständige Struktur mit allen geerbten Feldern von UIEvent und Event:

Warum keydown die erste Wahl ist

keypress ist offiziell als veraltet anerkannt. Es wird nur für Tasten ausgelöst, die einen Zeichenwert erzeugen, und erfasst keine Modifikatoren: nicht Alt, nicht Ctrl, nicht Shift, nicht Meta. Sie können Ctrl+Z oder Shift+Tab nicht über keypress behandeln.

Der Unterschied zwischen keydown und keyup: keydown wird ausgelöst, bevor der Browser die Taste verarbeitet; keyup wird danach ausgelöst. Daraus folgt eine wichtige Konsequenz: event.preventDefault() innerhalb von keydown bricht die Browser-Aktion ab (zum Beispiel das Einfügen eines Zeichens in ein Feld), innerhalb von keyup jedoch nicht. Für Hotkeys, Eingabevalidierung und Spielsteuerung benötigen Sie keydown.

Eigenschaftstabelle von KeyboardEvent

Die unteren drei Zeilen sind veraltet. Wechseln Sie, wo immer möglich, zu event.key. Falls Sie einen alten Browser unterstützen müssen, erstellen Sie einen Fallback:

1
window.addEventListener('keydown', function (event) {
2
  const key = event.key !== undefined ? event.key : event.which;
3
  if (key !== undefined) {
4
    console.log('Клавиша:', key);
5
  }
6
});

Aber im Jahr 2026 ist solcher Code nur noch für Legacy-Projekte. event.key funktioniert überall.

Modifikatortasten und Kombinationen

Control, Shift, Alt und Meta führen selbst keine Aktionen aus, ändern aber das Verhalten anderer Tasten. Das Drücken von Z ergibt den Buchstaben „z", während Ctrl+Z den Rückgängig-Befehl ausführt.

Boolesche Eigenschaften des Events helfen, einen Modifikator zu verfolgen:

1
document.getElementById('editor').addEventListener('keydown', function (event) {
2
  if (event.ctrlKey && event.key === 'z') {
3
    event.preventDefault();
4
    undoAction();
5
  }
6
 
7
  if (event.ctrlKey && event.shiftKey && event.key === 'z') {
8
    event.preventDefault();
9
    redoAction();
10
  }
11
});

Derselbe Ansatz gilt für beliebige Kombinationen: Ctrl+S (Speichern), Ctrl+Shift+N (Neues Fenster), Alt+Tab (Wechseln). Prüfen Sie die Reihenfolge: zuerst Modifikatoren über boolesche Flags, dann event.key für die spezifische Taste. Das macht die Logik lesbar, statt in numerischen Codes zu ertrinken.

Vollständige Tabelle der Tastencodes

Nachfolgend die aktuelle Tabelle für alle Standardtasten. Die Werte event.key und event.code sind so angegeben, wie moderne Browser (Chrome, Firefox, Edge, Safari) sie zurückgeben.

Navigation und Aktionen

Ziffernreihe (Haupttastatur)

Buchstaben A-Z

event.key gibt für Buchstaben den Kleinbuchstaben zurück. event.code hängt nicht von Groß-/Kleinschreibung oder Layout ab: KeyA bezeichnet die physische A-Taste, selbst wenn das Layout Russisch ist und die Eingabe „Ф" lautet.

Spezialtasten

Ziffernblock (Numpad)

Funktionstasten

System und Multimedia

Satzzeichen und Symbole

Wichtige Hinweise zur Tabelle

• event.which ist eine veraltete Eigenschaft, verwenden Sie event.key.
• event.code ist für Klein- (a) und Großbuchstaben (A) identisch, es ist die physische Taste. event.key gibt das tatsächliche Zeichen unter Berücksichtigung der Groß-/Kleinschreibung zurück.
• In Firefox weichen die event.which-Werte für die Tasten Equal, Semicolon und Minus von Chrome/Edge/Safari ab (in der Tabelle vermerkt). Ein weiterer Grund, event.which nicht zu verwenden.
• Chromium-basierte Browser und Firefox liefern für alle aufgeführten Tasten identische event.key- und event.code-Werte.
• Virtuelle Tastaturen: Die UI Events-Spezifikation verlangt, dass eine virtuelle Tastatur (mobil, auf dem Bildschirm), die ein Standardlayout nachbildet, korrekte event.code-Werte zurückgibt. In der Praxis verarbeiten mobile Browser (Chrome Android, Safari iOS) keydown/keyup für die Haupttasten korrekt, aber event.code kann bei nicht standardmäßigen Layouts leer sein.

Interaktiver Trainer

Zur schnellen Überprüfung jedes Codes aus dem Artikel nutzen Sie den Tastatur-Trainer: keyevents.netlify.app. Bewegen Sie den Cursor in den Bereich, drücken Sie Tasten und sehen Sie in Echtzeit die Werte von event.key, event.code und event.which sowie die Zustände der Modifikator-Flags. Der Quellcode ist auf GitHub verfügbar.

Video: Tastatur-Events in der Praxis

Eine kurze praktische Aufschlüsselung von keydown und keyup, der Umgang mit Modifikatoren und Hotkeys mit Live-Beispielen:

⁉️🤔 Häufig gestellte Fragen

Was ist der Unterschied zwischen event.key und event.code?

event.key gibt den Zeichenwert unter Berücksichtigung von Layout und Groß-/Kleinschreibung zurück: Für die A-Taste ist es "a" (oder "A" mit Shift), für russisches Layout "ф". event.code gibt den physischen Tastencode zurück, identisch für alle Layouts: "KeyA". Für Hotkeys ist event.code zuverlässiger, es hängt nicht von der Eingabesprache ab. Für Texteingaben verwenden Sie event.key.

Warum wird keypress nicht mehr verwendet?

Die W3C-Spezifikation hat keypress als veraltet markiert: Es wird nur für Zeichentasten ausgelöst und erfasst keine Modifikatoren. Sie können Ctrl+C, Shift+Tab und andere Kombinationen nicht über keypress behandeln. keydown deckt alle Tasten ab und wird in allen modernen Browsern identisch unterstützt.

Kann man vollständig auf event.which und event.keyCode verzichten?

Ja, im Jahr 2026 können Sie das. event.key wird in Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+ unterstützt. Wenn Ihr Projekt nicht auf IE11 oder Firefox 28 abzielt, verwenden Sie nur event.key und event.code.

Wie behandelt man einen langen Tastendruck?

Kombinieren Sie keydown und keyup. Bei keydown starten Sie einen Timer oder requestAnimationFrame, bei keyup setzen Sie ihn zurück. Für Spieleingaben ist das das Standardmuster: Taste gehalten, Figur bewegt sich, losgelassen, sie stoppt.

Funktionieren Tastatur-Events auf mobilen Geräten?

keydown und keyup funktionieren in mobilen Browsern bei Verwendung einer externen Bluetooth-Tastatur. Die Bildschirmtastatur erzeugt input-Events, nicht keydown/keyup für alle Tasten, daher ist es für Textfelder auf Mobilgeräten besser, das input-Event zu verwenden.

Wie unterscheidet man linke Shift von rechter?

Über event.code: "ShiftLeft" oder "ShiftRight". event.key gibt für beide "Shift" zurück. Gleiches gilt für Control, Alt und Meta.

Was Sie in Ihrem Projekt verwenden sollten

Wenn Sie neuen Code schreiben, nehmen Sie keydown als Haupt-Event und zur Tastenidentifikation event.key (Symbol) und event.code (physische Taste). Diese Kombination deckt alle Szenarien ab: Hotkeys, Navigation, Spieleingaben, Formularvalidierung.

Wenn Sie ein Produkt mit Legacy-Code auf Basis von event.which oder event.keyCode pflegen, planen Sie ein Refactoring. Der Arbeitsaufwand ist gering: Austausch in den Handlern, aber der Gewinn ist sauberer, vorhersagbarer Code ohne einen Zoo von Browser-Unterschieden.

Behalten Sie die obige Tabelle als Lesezeichen. Wenn Sie das nächste Mal den Code für eine bestimmte Taste benötigen, öffnen Sie sie und kopieren Sie den benötigten event.code-Wert, ohne sich an numerische Codes aus der IE6-Ära erinnern zu müssen.