Tools
Keycode-Info
Das Keycode-Info-Tool zeigt alle relevanten JavaScript-Eigenschaften eines Tastendrucks in Echtzeit an. Entwickler, die Tastaturkürzel oder Keyboard-Events implementieren, erhalten sofort den korrekten event.key, event.code, event.keyCode (veraltet) und event.which-Wert sowie alle Modifikatortasten. Das Tool beseitigt das lästige Nachschlagen in Tabellen und ersetzt es durch direkte Interaktion.
Was ist das Keycode-Info-Tool?
Das Keycode-Info-Tool ist ein interaktives Nachschlagewerk für JavaScript-Tastaturereignisse. Wenn eine Taste gedrückt wird, fängt das Tool das entsprechende keydown-Event ab und zeigt alle relevanten Event-Properties an: event.key (der logische Tastenwert, z. B. 'Enter'), event.code (der physische Tastencode, z. B. 'KeyA'), event.keyCode (die veraltete numerische Darstellung), event.which und die Zustände der Modifikatortasten Shift, Ctrl, Alt und Meta. Dies ist unverzichtbar für die Entwicklung von Tastaturkürzeln, Barrierefreiheitsfunktionen und Spielsteuerungen.
Wie funktioniert das Tool?
Das Tool registriert einen keydown-EventListener auf der gesamten Seite oder einem fokussierten Eingabebereich. Beim Drücken einer Taste werden sofort alle Event-Properties des KeyboardEvent-Objekts ausgelesen und in einer übersichtlichen Tabelle angezeigt. Die Anzeige wird bei jedem neuen Tastendruck aktualisiert. Kombinationen mit Modifikatortasten (z. B. Ctrl+S) werden vollständig erfasst und angezeigt. Mehrere aufeinanderfolgende Tastendrücke können in einem Verlauf gespeichert werden.
Typische Anwendungsfälle
- Ermitteln des korrekten event.code für die Implementierung von Tastaturkürzeln
- Unterscheiden zwischen event.key und event.code für internationale Tastaturbelegungen
- Testen, ob Sondertasten wie F1–F12, Escape oder Pfeiltasten die erwarteten Werte liefern
- Entwickeln von barrierefreien Webanwendungen mit vollständiger Tastaturnavigation
Schritt-für-Schritt-Anleitung
- Schritt 1: Klicke auf den Eingabebereich des Tools, um ihn zu fokussieren.
- Schritt 2: Drücke die Taste oder Tastenkombination, deren Codes du ermitteln möchtest.
- Schritt 3: Lies die angezeigten Werte ab: event.key, event.code, event.keyCode und die Modifikatoren.
- Schritt 4: Kopiere den benötigten Wert für deine JavaScript-Event-Handler-Implementierung.
Tipps & Hinweise
- Verwende event.code statt event.keyCode in neuem Code – keyCode ist veraltet und wird von modernen Browser-APIs nicht mehr empfohlen.
- event.key gibt den logischen Wert zurück (abhängig von der Tastaturbelegung), event.code den physischen Schlüssel (unabhängig vom Layout). Für Tastaturkürzel ist event.code in den meisten Fällen besser geeignet.
- Modifikatortasten wie Shift, Ctrl, Alt und Meta können allein oder in Kombination erkannt werden – das Tool zeigt alle gesetzten Flags simultan an.
Häufige Fragen
Was ist der Unterschied zwischen event.key und event.code?
event.key gibt den logischen Wert der Taste aus, der von der Tastaturbelegung abhängt (z. B. 'a' oder 'A' je nach Shift). event.code gibt den physischen Tastencode aus, unabhängig vom Layout (z. B. 'KeyA' immer, egal ob QWERTY oder AZERTY-Tastatur).
Warum ist event.keyCode veraltet?
event.keyCode war nie vollständig standardisiert und lieferte in verschiedenen Browsern inkonsistente Werte. Die modernen Alternativen event.key und event.code sind standardisiert (W3C UI Events Specification) und sollten in neuem Code verwendet werden.
Warum zeigt mein Browser manche Tastenkombinationen nicht an?
Einige Tastenkombinationen werden vom Browser oder Betriebssystem abgefangen, bevor sie die Webseite erreichen. Beispiele: Ctrl+T (neuer Tab), Ctrl+W (Tab schließen) oder Alt+F4. Diese können nicht von JavaScript-Event-Listenern erfasst werden.
Keycode-Info
Zeige JavaScript-Keycode, Code, Position und Modifikatoren jeder gedrückten Taste an.
Tool öffnen