KeyboardEvent.charCode — Eigenschaft · JavaScript-Referenz

Signatur

KeyboardEvent.charCode

Beschreibung

KeyboardEvent.charCode gibt den Unicode-Wert des Zeichens zurück, das durch einen Tastendruck erzeugt wurde, zum Beispiel 97 für „a“ oder 65 für „A“. Einen sinnvollen Wert hat die Eigenschaft nur im keypress-Ereignis. Bei keydown und keyup ist sie immer 0.

Tasten, die kein Zeichen erzeugen, etwa Umschalt-, Pfeil- oder Funktionstasten, liefern ebenfalls 0. Bei Enter geben manche Browser 13 zurück. Mit String.fromCharCode() lässt sich der Zahlenwert wieder in ein Zeichen umwandeln.

Die Eigenschaft ist veraltet, und dasselbe gilt für das keypress-Ereignis. Für neuen Code nimmt man KeyboardEvent.key (das eingegebene Zeichen als Zeichenkette) oder KeyboardEvent.code (die physische Taste). Um Texteingaben zu erkennen, eignen sich die Ereignisse beforeinput und input besser. charCode braucht man eigentlich nur noch, wenn man alten Code pflegt.

Rückgabewert

Typ

number

Beschreibung

Der Unicode-Codepunkt des eingegebenen Zeichens. Bei Tasten ohne Zeichen und bei allen Ereignissen außer keypress ist der Wert 0.

Beispiele

Zeichencode beim keypress ausgeben

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

input.addEventListener('keypress', (event) => {
  // charCode ist nur bei keypress aussagekräftig
  const zeichen = String.fromCharCode(event.charCode);
  console.log(`charCode: ${event.charCode}, Zeichen: ${zeichen}`);
});

charCode: 97, Zeichen: a (bei Eingabe von „a“)

Alter Code: nur Ziffern zulassen

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

plz.addEventListener('keypress', (event) => {
  const code = event.charCode;
  // 48–57 = '0'–'9'; 0 = Steuertaste, nicht blockieren
  if (code !== 0 && (code < 48 || code > 57)) {
    event.preventDefault();
  }
});

Moderner Ersatz mit key und beforeinput

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

// Empfohlen: beforeinput erfasst auch Einfügen, Autovervollständigung und IME-Eingaben
plz.addEventListener('beforeinput', (event) => {
  if (event.data && !/^\d+$/.test(event.data)) {
    event.preventDefault();
  }
});

// Tastenerkennung über key statt charCode
document.addEventListener('keydown', (event) => {
  console.log(event.key, event.charCode);
});

a 0 (bei keydown ist charCode immer 0)

// Wichtig · Fallstricke

Veraltet: Weder charCode noch keypress sollten in neuem Code verwendet werden. Stattdessen key, code oder die Ereignisse beforeinput/input nutzen.
Bei keydown und keyup ist der Wert immer 0. Ein häufiger Fehler ist, charCode dort abzufragen.
Browser unterscheiden sich in Details: Frühere Firefox-Versionen haben etwa bei Enter 0 geliefert, andere Browser 13. Alter Code enthält deshalb oft das Muster event.charCode || event.keyCode. Auch das ist veraltet.
Mobile Bildschirmtastaturen und Eingaben über IME (etwa bei Chinesisch oder Japanisch) lösen keypress oft gar nicht oder nicht zuverlässig aus.
Zeichen außerhalb der Basic Multilingual Plane (zum Beispiel Emojis) lassen sich nicht zuverlässig erfassen.
Eine Eingabeprüfung über keypress erkennt keine eingefügten Inhalte. Deshalb muss zusätzlich über input oder auf dem Server geprüft werden.

Siehe auch

KeyboardEvent KeyboardEvent.key KeyboardEvent.code KeyboardEvent.keyCode String.fromCharCode()