Keycode-Finder
Drücken Sie eine beliebige Taste, um ihre JavaScript-Tastaturereigniswerte zu sehen
Beliebige Taste drücken
—
Referenz gängiger Tasten
| Taste | Code | keyCode | Beschreibung |
|---|
Drücken Sie eine beliebige Taste und sehen Sie sofort alles, was der Browser darüber meldet: event.key, event.code, die veralteten Werte 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 — praktisch, wenn Sie die Taste gerade nicht drücken können.
Anleitung
- Taste drücken: Klicken Sie auf die Seite und drücken Sie eine beliebige Taste. Die große Anzeige zeigt event.key, die Karten darunter event.code, which und keyCode.
- Modifikatoren prüfen: Halten Sie Strg, Shift, Alt oder Meta beim Tastendruck — die aktiven Badges leuchten auf.
- Referenztabelle durchsuchen: Geben Sie einen Tastennamen, Code oder eine Beschreibung ein (z. B. 「enter」 oder 「F5」), um die Tabelle gängiger Tasten zu filtern.
- Werte kopieren: Verwenden Sie den angezeigten Key, Code oder keyCode in Ihren eigenen Event-Handlern.
Funktionen
- Live-Erfassung von event.key, event.code, event.which und event.keyCode
- Echtzeit-Anzeige des Status von Strg, Shift, Alt und Meta
- Durchsuchbare Referenztabelle mit Buchstaben, Ziffern, F1–F12, Pfeiltasten, Bearbeitungstasten, Modifikatoren, Satzzeichen und Ziffernblock
- Verständliche Beschreibung jeder physischen Taste
- Läuft vollständig im Browser — kein Tastendruck verlässt die Seite
key, code oder keyCode: Was soll man verwenden?
Modernen Code sollte auf event.key hören, wenn die Bedeutung zählt («hat der Nutzer Enter gedrückt?»), und auf event.code, wenn die Position zählt («der WASD-Block», unabhängig vom Layout). Die numerischen Eigenschaften keyCode und which sind veraltet, tauchen aber in Legacy-Bibliotheken und älteren Antworten weiterhin auf, daher zeigt dieses Tool sie nebeneinander. Ein Fallstrick: Bei druckbaren Zeichen spiegelt keyCode den ungeschifteten Großbuchstaben wider — a und Shift+A melden beide 65 — während event.key exakt zwischen 「a」 und 「A」 unterscheidet.
Anwendungsfälle
- Tastenkürzel: Prüfen Sie die exakten Key- und Modifikator-Werte, bevor Sie einen Hotkey-Handler verdrahten.
- Spielsteuerung: Finden Sie layoutunabhängige event.code-Werte für WASD-Steuerungen.
- Fehlerberichte: Bestätigen Sie, was ein Nutzer mit nicht-US-Tastaturlayout tatsächlich erzeugt.
- Lernen: Erkunden Sie, wie Browser Tasten melden — von Pfeiltasten bis zu Ziffernblock-Operatoren.
Verwandte Tools
Häufig gestellte Fragen
Was ist der Unterschied zwischen event.key und event.code?
event.key liefert das Zeichen oder den benannten Wert, den die Taste erzeugt, und ändert sich je nach Tastaturlayout und Modifikatortasten — zum Beispiel ergibt A mit Shift 「A」 statt 「a」. event.code bezeichnet die physische Tastenposition (z. B. KeyA) und bleibt layoutunabhängig gleich, was es zur richtigen Wahl für Spielsteuerungen und Tastenkürzel macht.
Warum sind keyCode und which als veraltet markiert?
Beide sind Legacy-Eigenschaften aus der Zeit vor der Vereinheitlichung des KeyboardEvent-Standards. Sie funktionieren weiterhin in jedem Browser und liefern dieselbe Zahl (z. B. 13 für Enter, 27 für Escape), aber die Spezifikation empfiehlt stattdessen event.key und event.code. Dieses Tool zeigt sie, weil viele ältere Codebasen und Tutorials darauf aufbauen.
Warum zeigt meine Buchstabentaste KeyA, obwohl ich kein QWERTY-Layout habe?
event.code basiert auf der physischen Position der Taste auf einem Standard-US-Layout. Auf einer AZERTY-Tastatur sitzt die mit Q beschriftete Taste an der Position KeyA, daher meldet ein Druck den Code KeyA mit dem Key q. Das tatsächlich erzeugte Zeichen steht in event.key.
Wie erkenne ich Modifikatortasten wie Strg, Shift, Alt und Meta?
Jedes Tastaturereignis trägt vier boolesche Flags: ctrlKey, shiftKey, altKey und metaKey. Das Tool hebt ein Badge für jede gehaltene Modifikatortaste hervor. Meta ist auf PCs die Windows-Taste und auf macOS die Befehlstaste.
Warum reagieren manche Tasten nicht im Tool?
Browser reservieren bestimmte Tasten und Kombinationen: F12 öffnet meist die DevTools, und systemweite Kürzel wie Alt+Tab erreichen die Seite gar nicht. Reine Modifikatortasten haben außerdem kein druckbares Zeichen, daher wird stattdessen der Name des Modifikators angezeigt.