KeyboardEvent.keyCode — Eigenschaft · JavaScript-Referenz

Signatur

KeyboardEvent.keyCode

Beschreibung

KeyboardEvent.keyCode gibt eine Ganzzahl zurück, die die gedrückte Taste kennzeichnet, z. B. 13 für Enter, 27 für Escape oder 65 für die Taste „A“. Bei keydown und keyup steht der Wert für die physische bzw. virtuelle Taste. Bei keypress liefern viele Browser dagegen den Zeichencode, also dasselbe wie charCode.

Die Eigenschaft gilt als veraltet. Ihre Werte waren nie einheitlich festgelegt und hängen von Betriebssystem, Tastaturlayout und Browser ab. Besonders unzuverlässig sind Satzzeichen wie ;, = und - sowie Tasten auf nicht-englischen Layouts, etwa den deutschen Umlauten. Für neuen Code gibt es zwei bessere Eigenschaften: KeyboardEvent.key liefert das erzeugte Zeichen bzw. den Tastennamen ("Enter", "a", "ArrowUp"). KeyboardEvent.code liefert die physische Position der Taste ("KeyA", "Digit1").

Sinnvoll ist keyCode heute nur noch in Altcode oder als Rückfallwert für sehr alte Umgebungen, etwa alte Android-WebViews oder den Internet Explorer. Dort ist key nicht vorhanden oder liefert falsche Werte.

Rückgabewert

Typ

number

Beschreibung

Ganzzahliger Tastencode, z. B. 13 (Enter), 27 (Escape), 37–40 (Pfeiltasten). Ist die Taste unbekannt, ist der Wert 0. Während einer IME-Eingabe (Komposition) ist er meist 229.

Beispiele

Altcode: Enter-Taste im Eingabefeld erkennen

const input = document.querySelector('#suche');

input.addEventListener('keydown', (event) => {
  // Veraltet: 13 = Enter
  if (event.keyCode === 13) {
    console.log('Suche starten:', input.value);
  }
});

Suche starten: javascript

Moderne Variante mit Rückfall auf keyCode

const isEscape = (event) =>
  event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;

document.addEventListener('keydown', (event) => {
  if (isEscape(event)) {
    document.querySelector('dialog[open]')?.close();
    console.log('Dialog geschlossen');
  }
});

Dialog geschlossen

IME-Komposition ausfiltern

const editor = document.querySelector('#editor');

editor.addEventListener('keydown', (event) => {
  // Während japanischer/chinesischer Eingabe nicht reagieren
  if (event.isComposing || event.keyCode === 229) return;

  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault();
    console.log('Nachricht senden');
  }
});

Nachricht senden

keyCode, key und code im Vergleich

document.addEventListener('keydown', (event) => {
  console.log({
    keyCode: event.keyCode,
    key: event.key,
    code: event.code
  });
});
// Taste „Z“ auf deutschem Layout gedrückt

{ keyCode: 90, key: 'z', code: 'KeyY' }

// Wichtig · Fallstricke

Veraltet: Für neuen Code key (für die Bedeutung der Taste) oder code (für die physische Position, z. B. bei WASD-Steuerung in Spielen) verwenden. Browser unterstützen keyCode weiterhin, doch der Wert ist nicht verlässlich einheitlich.
Die Werte hängen vom Layout ab: Satzzeichen und Umlaute liefern je nach Browser, Betriebssystem und Tastaturlayout unterschiedliche Codes. Firefox und Chrome weichen z. B. bei ; (59 bzw. 186) und = (61 bzw. 187) voneinander ab.
Bei keypress (selbst veraltet) enthält keyCode häufig den Zeichencode statt des Tastencodes. Bei keydown ist 65 sowohl „a“ als auch „A“, bei keypress ist „a“ dagegen 97.
Der Wert 229 zeigt eine laufende IME-Eingabe an. Zusätzlich event.isComposing prüfen.
Auf Mobilgeräten mit virtueller Tastatur, besonders unter Android, liefert keyCode oft 0 oder 229. Für Texteingaben besser das Ereignis input bzw. beforeinput nutzen.
Die Eigenschaft ist schreibgeschützt. Sie lässt sich auch nicht per new KeyboardEvent() setzen, weil keyCode keine Option im Konstruktor-Wörterbuch ist.

Siehe auch

KeyboardEvent.key KeyboardEvent.code KeyboardEvent.charCode KeyboardEvent.isComposing KeyboardEvent KeyboardEvent.keyIdentifier