Keycode-Finder

Drücke eine beliebige Taste und sieh sofort alles, was der Browser darüber meldet: event.key, event.code, die veralteten Zahlen event.which und event.keyCode sowie die gehaltenen Modifikatoren (Strg, Shift, Alt, Meta). Unter der Live-Anzeige listet eine durchsuchbare Referenztabelle die Key-, Code- und Legacy-keyCode-Werte für Buchstaben, Ziffern, Funktionstasten, Pfeiltasten und mehr. Die Erfassung läuft im Seitenkontext und lokal, Tastendrücke werden also aus dem Ereignisobjekt gelesen, ohne protokolliert oder irgendwohin gesendet zu werden.

Die Live-Anzeige lesen

Klicke auf die Seite, damit sie den Fokus hat, und drücke dann eine Taste. Das große Feld zeigt event.key — den Wert, den die Taste erzeugt hat. Drei Karten darunter schlüsseln event.code (die physische Taste), event.which und event.keyCode auf. Vier Badges für Strg, Shift, Alt und Meta leuchten auf, sobald das entsprechende Modifikator-Flag bei diesem Tastendruck true ist.

Probiere ein paar bewusste Kombinationen aus, um zu sehen, wie die Werte auseinanderlaufen. Drücke a und dann Shift+A: Der Key wechselt von a zu A, aber der Code bleibt KeyA und keyCode bleibt 65. Drücke die Leertaste, und event.key ist ein einzelnes Leerzeichen statt des Wortes „Space“, während event.code Space und keyCode 32 ist. Das macht das Tool nützlich, um genau zu bestätigen, was ein Handler erhalten wird, bevor du Verzweigungslogik schreibst.

event.key vs event.code vs keyCode

Moderner Code sollte auf event.key verzweigen, wenn die Bedeutung zählt („hat der Nutzer Enter gedrückt?“), und auf event.code, wenn die physische Position zählt („der WASD-Block, egal welches Layout“). Die numerischen Eigenschaften keyCode und which sind veraltet, tauchen aber noch in Legacy-Bibliotheken und älteren Antworten auf, deshalb zeigt dieses Tool sie nebeneinander.

Bei druckbaren Zeichen spiegelt keyCode den ungeschifteten Großbuchstabenwert wider: a und Shift+A melden beide 65, und 1 und Shift+1 melden beide 49, obwohl Letzteres ! erzeugt. event.key liefert dir das exakte Zeichen und ist damit die richtige Wahl für Texteingaben. event.code ignoriert Shift und Layout vollständig, weshalb es die sichere Wahl für Spielsteuerungen auf internationalen Tastaturen ist.

Praxisbeispiel: Ein Strg+K-Kürzel verdrahten

Angenommen, du willst einen Hotkey für eine „Befehlspalette“. Halte Strg gedrückt und drücke k. Die Anzeige zeigt:

Eigenschaft	Wert
event.key	k
event.code	KeyK
event.keyCode / which	75
event.ctrlKey	true

Ein Handler wie if (e.ctrlKey && e.key === 'k') { openPalette(); } passt, und die keyCode-Karte bestätigt die Legacy-75, falls du eine ältere Bibliothek unterstützen musst. Vergleiche nun ein WASD-Bewegungsschema: Auf einer AZERTY-Tastatur sitzt die mit Z beschriftete Taste dort, wo auf US-Layout das W liegt, daher wird event.key zu z, während event.code weiterhin KeyW meldet. Die Verzweigung über event.code hält die Bewegung über Layouts hinweg konsistent; die Verzweigung über event.key tut das nicht.

Funktionstasten folgen demselben Muster: F1 ist Code F1 mit keyCode 112, und die Reihe läuft bis F12 bei 123. Pfeiltasten sind die Codes ArrowUp (38), ArrowDown (40), ArrowLeft (37) und ArrowRight (39).

Die richtige Eigenschaft wählen

Aufgabe	Auslesen	Warum
Texteingabe oder Validierung	event.key	Liefert das exakte Zeichen, inklusive Shift- und Dead-Key-Ergebnissen
Spielbewegung oder layoutunabhängige Kürzel	event.code	Verfolgt die physische Position unabhängig vom Tastaturlayout
Legacy-Code migrieren	event.keyCode	Entspricht den Zahlen, die ältere Bibliotheken erwarten
Einen mit einer anderen Taste gehaltenen Modifikator erkennen	event.ctrlKey, event.shiftKey, event.altKey, event.metaKey	Meldet den Zustand direkt am keydown-Ereignis

Ein robustes Kürzel kombiniert oft beides: Prüfe event.code für die physische Taste und ein Modifikator-Flag für die Kombination, statt event.key als String zu vergleichen.

Häufige Fehler

• keyCode für Texteingaben verwenden. Es kann a nicht von A oder 1 nicht von ! unterscheiden, daher brechen Validierung und Zeichenbehandlung.
• event.key für Spielsteuerungen verwenden. Layout und Shift ändern den Wert, sodass dieselbe physische Taste auf Nicht-US-Tastaturen aufhört zu funktionieren.
• Annehmen, die Modifikatortaste selbst habe einen druckbaren Wert. Shift allein meldet key als Shift; das nützliche Signal ist das shiftKey-Flag bei der nächsten Taste.
• preventDefault vergessen. Bei Tasten wie Tab oder der Leertaste läuft die Standardaktion des Browsers weiter und kann scrollen oder den Fokus verschieben, wenn du sie nicht unterdrückst.
• Erwarten, dass reservierte Kürzel ankommen. Strg+W, Strg+T, Alt+Tab und F12 werden vom Browser oder Betriebssystem behandelt und erreichen deinen Listener nie.

Was die Referenztabelle abdeckt

Die durchsuchbare Tabelle unter der Live-Anzeige listet die US-Layout-Werte für die Buchstaben A–Z, die Ziffern 0–9, die Funktionstasten F1–F12, Pfeil- und Navigationstasten, Bearbeitungstasten wie Enter und Backspace, die Modifikator- und Sperrtasten, gängige Satzzeichen sowie den vollständigen Ziffernblock. Jede Zeile trägt eine kurze Beschreibung in Alltagssprache, und das Suchfeld passt auf Key, Code, Beschreibung oder Kategorie — tippe numpad, arrow oder F5, um zu filtern. Es ist der Rückfall, wenn du einen Wert brauchst, den du gerade nicht drücken kannst, etwa eine auf einer Laptop-Tastatur fehlende Taste. Die Suche nach letter liefert alle 26 Buchstabenzeilen, punctuation liefert die Klammer-, Anführungs- und Schrägstrich-Tasten mit ihren Codes, und KeyA liefert die einzelne Zeile für die A-Taste mit keyCode 65.

Verwandte Tools

• ASCII-Tabelle
• Regex-Tester
• URL-Encoder
• Base64 Encoder/Decoder