KeyboardEvent.code — Eigenschaft · JavaScript-Referenz

Signatur

KeyboardEvent.code

Beschreibung

KeyboardEvent.code gibt an, welche physische Taste gedrückt wurde, nicht welches Zeichen dabei entsteht. Der Wert orientiert sich an der Position der Taste auf einer US-QWERTY-Tastatur: Die Taste rechts neben Tab heißt immer "KeyQ", auch auf einer französischen AZERTY-Tastatur, auf der dort ein „A“ steht. Auf einer deutschen QWERTZ-Tastatur liefert die Taste mit der Aufschrift „Z“ daher "KeyY".

Das macht code ideal für positionsbasierte Steuerungen: WASD-Bewegung in Spielen, Tastenkürzel, die immer an derselben Stelle liegen sollen, oder Emulatoren und virtuelle Klaviere. Links- und rechtsseitige Modifikatoren werden unterschieden ("ShiftLeft" / "ShiftRight"), ebenso Ziffernblock-Tasten ("Numpad5" vs. "Digit5").

Wenn Sie dagegen wissen wollen, was der Benutzer tippen wollte (Texteingabe, Kürzel wie „Strg+Z“ nach Beschriftung), verwenden Sie KeyboardEvent.key. Die veralteten Eigenschaften keyCode und which sollten nicht mehr verwendet werden.

Typische Werte: "KeyA"–"KeyZ", "Digit0"–"Digit9", "Space", "Enter", "Escape", "ArrowUp", "ControlLeft", "F1", "Numpad0", "Backquote", "IntlBackslash". Bei unbekannten Tasten ist der Wert "Unidentified" bzw. ein Leerstring.

Rückgabewert

Typ

string

Beschreibung

Der physische Tastencode gemäß der W3C-Spezifikation UI Events KeyboardEvent code Values, z. B. "KeyW", "ShiftLeft" oder "Numpad7". Schreibgeschützt.

Beispiele

Physische Taste und erzeugtes Zeichen vergleichen

document.addEventListener('keydown', (event) => {
  // Auf deutscher QWERTZ-Tastatur, Taste mit Aufschrift "Z"
  console.log(`code: ${event.code}, key: ${event.key}`);
});

code: KeyY, key: z

WASD-Steuerung unabhängig vom Tastaturlayout

const pressed = new Set();

const onDown = (event) => {
  if (['KeyW', 'KeyA', 'KeyS', 'KeyD'].includes(event.code)) {
    event.preventDefault();
    pressed.add(event.code);
  }
};
const onUp = (event) => pressed.delete(event.code);

window.addEventListener('keydown', onDown);
window.addEventListener('keyup', onUp);

const gameLoop = () => {
  const dx = (pressed.has('KeyD') ? 1 : 0) - (pressed.has('KeyA') ? 1 : 0);
  const dy = (pressed.has('KeyS') ? 1 : 0) - (pressed.has('KeyW') ? 1 : 0);
  if (dx || dy) console.log(`Bewegung: ${dx}, ${dy}`);
  requestAnimationFrame(gameLoop);
};
requestAnimationFrame(gameLoop);

Bewegung: 0, -1 (bei gedrückter W-Position; auf AZERTY die Taste "Z")

Linke und rechte Modifikatortaste unterscheiden

window.addEventListener('keydown', (event) => {
  switch (event.code) {
    case 'ShiftLeft':
      console.log('Linke Umschalttaste');
      break;
    case 'ShiftRight':
      console.log('Rechte Umschalttaste');
      break;
    case 'Numpad5':
      console.log('Ziffernblock 5');
      break;
    case 'Digit5':
      console.log('5 in der Zahlenreihe');
      break;
  }
});

Rechte Umschalttaste

Beschriftung zur physischen Taste ermitteln (Keyboard Map API)

const showHint = async () => {
  if (!navigator.keyboard?.getLayoutMap) {
    console.log('Hinweis: Taste W (US-Position)');
    return;
  }
  const layout = await navigator.keyboard.getLayoutMap();
  const label = layout.get('KeyW');
  console.log(`Drücken Sie "${label.toUpperCase()}" zum Vorwärtslaufen`);
};

showHint();

Drücken Sie "W" zum Vorwärtslaufen (auf AZERTY: "Z")

// Wichtig · Fallstricke

Nicht für Texteingabe verwenden: code berücksichtigt weder Layout noch Umschalttaste noch IME. Für eingegebene Zeichen event.key oder besser das input-Event nutzen.
Namen sind US-bezogen: "KeyY" ist auf deutschen Tastaturen die „Z“-Taste. In Hilfetexten nicht einfach den Code anzeigen, sondern die Beschriftung über navigator.keyboard.getLayoutMap() ermitteln (nur Chromium-Browser) oder neutral formulieren.
Die Taste "IntlBackslash" (<>| auf deutschen Tastaturen) existiert auf US-Tastaturen nicht; manche Tasten melden auf einzelnen Plattformen "Unidentified" oder einen Leerstring.
Bei virtuellen Tastaturen auf Mobilgeräten (Android/iOS) ist code oft leer oder unzuverlässig – dort key bzw. input-Events verwenden.
Bei gedrückter Fn-Taste erzeugen Laptops teils abweichende Codes; die Fn-Taste selbst wird meist gar nicht gemeldet.
Kompatibilität: in allen aktuellen Browsern verfügbar (Chrome 48+, Firefox 38+, Safari 10.1+, Edge 79+). Internet Explorer unterstützt die Eigenschaft nicht; dort gab es nur das veraltete keyCode.

Siehe auch

KeyboardEvent.keyCode KeyboardEvent.charCode KeyboardEvent.key KeyboardEvent.altKey KeyboardEvent.ctrlKey