Zeigt event.key, event.code, keyCode und event.location für jede Taste Status von Strg, Umschalt, Alt und Meta sowie Tastenwiederholung Kopierfertige JavaScript-if-Abfrage für die gedrückte Taste Verlauf der zuletzt gedrückten Tasten Verhindert Scrollen durch Leertaste und Pfeiltasten beim Testen

JavaScript-Keycode-Tester - event.key, event.code und keyCode

event.key vs. event.code vs. keyCode

Jeder Tastendruck im Browser löst ein KeyboardEvent mit mehreren Eigenschaften aus. event.key ist der erzeugte Wert, etwa "a", "A", "Enter" oder "ArrowUp", und folgt Tastaturlayout und Umschalt-Status. event.code beschreibt die physische Taste, etwa "KeyA" oder "Digit1", und bleibt auf QWERTZ-, AZERTY- oder Dvorak-Tastaturen gleich. keyCode und which sind alte Zahlencodes, veraltet und zwischen Browsern und Layouts uneinheitlich. Moderner Code nutzt event.key für Text und Shortcuts und event.code, wenn die Position zählt, etwa bei WASD-Steuerung in Spielen.

Funktionen

• Zeigt event.key, event.code, keyCode und event.location für jede Taste
• Status von Strg, Umschalt, Alt und Meta sowie Tastenwiederholung
• Kopierfertige JavaScript-if-Abfrage für die gedrückte Taste
• Verlauf der zuletzt gedrückten Tasten
• Verhindert Scrollen durch Leertaste und Pfeiltasten beim Testen

Privat by Design

Tastenereignisse werden nur auf dieser Seite in deinem Browser gelesen. Nichts wird aufgezeichnet oder gesendet.

Kein Keylogging, 100 % clientseitig.

So verwenden Sie: Keycode-Tester

1
Klicke irgendwo auf die Seite, damit sie den Fokus hat, und drücke eine Taste. Auf dem Handy tippst du ins Eingabefeld, um die Bildschirmtastatur zu öffnen.
2
Lies den großen Wert: event.key. Darunter stehen event.code und der alte keyCode.
3
Die Karten zeigen die Tastenposition (linke oder rechte Umschalttaste, Ziffernblock) und gehaltene Modifier; jeder Wert lässt sich per Klick kopieren.
4
Kopiere die erzeugte if-Abfrage in deinen keydown-Handler. Der Verlauf zeigt die letzten Tasten zum Vergleichen von Kombinationen.

Praxisbeispiele

Tastenkürzel

Für eine Suche per Strg+K oder Cmd+K drückst du die Kombination und nutzt event.key === "k" mit event.ctrlKey || event.metaKey, das klappt unter Windows und macOS.

Spielsteuerung

Nutze event.code ("KeyW", "KeyA", "KeyS", "KeyD"), damit Bewegungstasten auf AZERTY und anderen Layouts an derselben Stelle bleiben, wo event.key "z" oder "q" wäre.

Mit Enter senden

Prüfe in einem Chatfeld event.key === "Enter" und !event.shiftKey, um mit Enter zu senden und mit Umschalt+Enter eine neue Zeile einzufügen.

Ziffernblock und seitenspezifische Tasten

Unterscheide die Enter-Taste des Ziffernblocks (location 3) von der Haupt-Enter-Taste oder linke und rechte Umschalttaste (location 1 und 2), wenn eine App das braucht.

Häufige Fragen

event.key oder event.code?+

Nimm event.key für alles, was am Zeichen hängt, etwa Buchstaben-Shortcuts, Texteingabe, Escape und Enter. Nimm event.code, wenn die physische Position zählt, etwa in Spielen oder für layoutunabhängige Hotkeys.

Warum ist keyCode veraltet?+

keyCode-Werte wurden nie standardisiert: Sie unterscheiden sich zwischen Browsern, Tastaturlayouts und zwischen keydown und keypress. Der KeyboardEvent-Standard ersetzte sie durch key und code, die alle modernen Browser unterstützen.

Warum zeigt die Handytastatur "Unidentified" oder 229?+

Bildschirmtastaturen senden oft Composition-Events statt echter Tastencodes, besonders mit Autokorrektur oder IME. Für Text auf Mobilgeräten auf input- oder beforeinput-Events hören.

Warum kommen manche Shortcuts nicht bei der Seite an?+

Browser oder Betriebssystem verarbeiten manche Kombinationen zuerst, etwa Strg+W, Strg+T, Cmd+Q oder Alt+Tab, daher kann eine Webseite sie weder abfangen noch blockieren.