Keycode Info

Über dieses Tool

Keycode Info zeigt für jede gedrückte Taste, welche Werte der Browser im Tastatur-Ereignis meldet: event.key, event.code und den alten Zahlencode event.keyCode. Dazu kommen die gehaltenen Modifier, die Position der Taste (location) und weitere Werte. So lässt sich ein Tastendruck für eigenen Code nachschlagen oder prüfen, ob und wie eine Taste überhaupt ankommt. Das Tool läuft vollständig im Browser, die Tastendrücke werden nicht gesendet. Es richtet sich an Web- und Spieleentwickler, aber auch an alle, die wissen wollen, was ihre Tastatur meldet.

Wofür du es nutzen kannst

Den keyCode einer Taste für bestehenden, älteren JavaScript-Code nachschlagen
Für ein Browserspiel prüfen, welchen event.code die Tasten W, A, S und D haben
Herausfinden, ob ein Kürzel wie Strg+S über event.key oder event.code abgefragt werden sollte
Kontrollieren, ob eine Taste am Rechner überhaupt im Browser ankommt
Unterschiede zwischen deutschem ISO- und US-ANSI-Layout sehen, etwa bei Y und Z oder der Taste neben der linken Shift-Taste
Links- und rechtsseitige Tasten sowie den Ziffernblock über event.location unterscheiden
Tottasten (^, ´) und IME-Eingaben prüfen: key „Dead“ oder „Process“, isComposing
Am Handy sehen, ob die Bildschirmtastatur „Unidentified“ meldet und was im input-Ereignis ankommt
Fertige JavaScript-Abfragen für die zuletzt gedrückte Taste kopieren

Häufige Fragen

Wie finde ich den keyCode einer Taste heraus?

Klicke in den Tastaturbereich und drücke die Taste. Der keyCode erscheint direkt neben key und code in der großen Anzeige. Beachte, dass event.keyCode veraltet ist und nur für alten Code gedacht ist.

Was ist der Unterschied zwischen event.key und event.code?

event.key ist das Zeichen oder der Name, den die Taste mit aktuellem Layout und Modifiern erzeugt, etwa „a“ oder „A“. event.code bezeichnet die physische Taste, etwa „KeyA“, unabhängig vom Layout. key passt für Texteingabe und Kürzel, code für Spielsteuerung wie WASD.

Ist event.keyCode noch zu verwenden?

Nein, event.keyCode und event.which gelten als veraltet (deprecated). Sie funktionieren in Browsern meist noch, sollten aber in neuem Code durch key oder code ersetzt werden.

Warum zeigt meine deutsche Tastatur bei Z den code KeyY?

code benennt die Taste nach ihrer Position auf einer US-Tastatur. Auf einer deutschen Tastatur sitzt das Z dort, wo US das Y hat. Der code bleibt deshalb KeyY, key liefert dagegen „z“.

Was bedeuten „Dead“, „Process“ und „Unidentified“ bei key?

„Dead“ steht für eine Tottaste wie ^ oder ´, das Zeichen entsteht erst mit der nächsten Taste. „Process“ meldet eine IME-Eingabe. „Unidentified“ heißt, dass das System die Taste nicht bestimmen kann, typisch bei Bildschirmtastaturen am Handy.

Warum erkennt das Tool am Handy keine Tasten?

Bildschirmtastaturen melden oft keine echten Tasten, key kommt dann als „Unidentified“. Tippe stattdessen ins Eingabefeld: Das input-Ereignis zeigt, welches Zeichen angekommen ist.

Was bedeutet event.location?

Der Wert sagt, wo eine mehrfach vorhandene Taste sitzt: 0 Standard, 1 links, 2 rechts, 3 Ziffernblock. Die Spezifikation kennt außerdem 4 für Mobilgeräte und 5 für Joystick oder Gamecontroller.

Werden meine Tastendrücke gespeichert oder gesendet?

Nein, das Tool arbeitet nur im Browser und sendet nichts. Der Verlauf der letzten Tasten existiert nur auf der Seite selbst.

Hält mich das Tool mit Tab fest?

Nein. Tab und Umschalt+Tab werden angezeigt, aber nie blockiert, der Fokus wandert weiter. Browser-Kürzel mit Strg, Alt oder Win bleiben beim Browser.

Hintergrund

Wenn im Browser eine Taste gedrückt wird, löst sie Tastatur-Ereignisse aus: keydown beim Drücken und keyup beim Loslassen. Diese Ereignisse tragen mehrere Eigenschaften, die sich in ihrer Aufgabe deutlich unterscheiden.

event.key liefert den logischen Wert der Taste. Er hängt vom Tastaturlayout und von gehaltenen Modifiern ab: Mit Shift wird aus „a“ ein „A“. Das ist die richtige Wahl für Texteingabe und Kürzel wie Strg+S. event.code beschreibt dagegen die physische Taste, zum Beispiel „KeyA“, „Digit1“ oder „ShiftLeft“. Er benennt die Taste nach ihrer Position auf einer US-Tastatur und bleibt daher auf jedem Layout gleich. Deshalb eignet er sich für Spielsteuerungen wie WASD, die überall an derselben Stelle liegen sollen. Ein Beispiel aus der Spezifikation: Die Tasten Digit2 und KeyQ ergeben mit US-Layout „2“ und „q“, mit französischem Layout „é“ und „a“.

event.keyCode und event.which sind ältere numerische Werte. Beide gelten als veraltet (deprecated) und sind nur für bestehenden Code gedacht. Da viele ältere Tutorials sie noch verwenden, suchen viele Entwickler dennoch nach dem Zahlenwert einer Taste.

Weitere Eigenschaften ergänzen das Bild. event.location unterscheidet gleiche Tasten: 0 Standard, 1 links, 2 rechts, 3 Ziffernblock, 4 Mobilgerät, 5 Joystick. event.repeat ist true, wenn eine gehaltene Taste automatisch wiederholt. Mit shiftKey, ctrlKey, altKey und metaKey lassen sich gehaltene Modifier prüfen, getModifierState() zeigt zusätzlich eingerastete Sperrtasten wie CapsLock und NumLock sowie AltGraph. Unter Windows meldet AltGr häufig zugleich Strg und Alt.

Sonderfälle entstehen bei Eingabemethoden. Bei Tottasten wie ^ oder ´ meldet key den Wert „Dead“, das Zeichen entsteht erst mit der nächsten Taste. Bei einer IME-Eingabe lautet er „Process“, und isComposing ist true, solange die Komposition zwischen compositionstart und compositionend läuft; Kürzel sollten dann nichts auslösen. Auf Handy-Bildschirmtastaturen kommt key oft als „Unidentified“, dort liefert das input-Ereignis das tatsächliche Zeichen.

Auch Layouts unterscheiden sich: Auf deutschen Tastaturen (ISO) sitzt das Z dort, wo US das Y hat, der code bleibt aber KeyY. Die zusätzliche Taste links neben der linken Shift-Taste hat den code IntlBackslash, die US-Tastatur (ANSI) kennt sie nicht.