Tastencode-Anzeige

Was ist eine Tastencode-Anzeige?#

Wenn eine Taste gedrückt wird, feuert der Browser ein KeyboardEvent, das zwei parallele Antworten auf die Frage „welche Taste?“ trägt. Das Feld key sagt, welches Zeichen der Druck erzeugt hat — a, A, Enter, ?. Das Feld code sagt, welche physische Taste gedrückt wurde — KeyA, Enter, Slash — unabhängig vom Layout. Diese beiden Antworten driften auseinander, sobald eine internationale Tastatur, ein Modifikator oder ein Ziffernblock ins Spiel kommt, und genau dieser Unterschied ist es, den Sie sehen müssen, wenn Sie einen Shortcut, eine Spiele-Steuerung oder ein Accessibility-Feature verdrahten.

Diese Seite fängt jedes keydown in einem Snapshot ein und legt jedes Feld offen: key, code, die veralteten Zahlen keyCode und which (fürs Debuggen älteren Codes behalten), die location (Standard / Links / Rechts / Ziffernblock), die aktiven Modifikatoren und ob der Druck eine Auto-Wiederholung war. Ein rollierender Verlauf der letzten Drucke bleibt sichtbar, sodass Sie einen Akkord oder eine Sequenz nachverfolgen können.

Nichts ist global: Die Erfassung geschieht nur, während der Fokus innerhalb der Erfassungszone liegt, sodass der Rest der Seite der Tastatur normal weiter gehorcht.

So wird es verwendet#

1. Klicken Sie irgendwo in die gestrichelte Erfassungszone oben (oder tabben Sie hinein). Sie hebt sich hervor, um zu zeigen, dass sie lauscht.
2. Drücken Sie eine Taste oder einen Akkord. Die Snapshot-Tabelle darunter aktualisiert sich bei jedem keydown.
3. Lesen Sie die Zeilen:
   • Taste (key) — der logische Schlüsselwert (das Zeichen oder die benannte Taste, die der Browser aufgelöst hat).
   • Code (code) — die physische Taste, layoutunabhängig. Das ist das, worauf Sie für Shortcuts matchen.
   • keyCode und which — die veralteten numerischen Codes, mit einem veraltet-Badge markiert. Matchen Sie sie nur, wenn Sie alten Code portieren, der sie noch liest.
   • Position — Standard, Links, Rechts oder Ziffernblock. So unterscheiden Sie links-Shift von rechts-Shift oder den Ziffernblock-5 von der 5 in der oberen Reihe.
   • Wiederholung — ja, während eine Taste gehalten wird und sich auto-wiederholt.
   • Modifikatoren — Badges für die jeweiligen gehaltenen Ctrl, Alt, Shift, Meta.
4. Aktivieren Sie Standard-Tastenaktionen blockieren in der Optionsleiste, wenn die Seite den Browser daran hindern soll, auf die Taste zu reagieren (um beispielsweise Tab daran zu hindern, den Fokus wegzubewegen, während Sie testen).
5. Verwenden Sie Aktuelle kopieren, um den aktuellen Snapshot zu übernehmen, und Verlauf löschen im Verlaufs-Panel, um die rollierende Liste zurückzusetzen.

Die wichtigsten Funktionen#

• Sowohl key als auch code, Seite an Seite. Die nützlichste Unterscheidung in der Tastaturbehandlung, bei jedem Druck sichtbar — sodass Sie sofort sehen, warum key === "@" auf einem Layout von Shift+Digit2 kommen kann und auf einem anderen von einer völlig anderen physischen Taste.
• Positions-Bewusstsein. Linke und rechte Modifikatoren werden getrennt gemeldet, und Ziffernblock-Tasten tragen location: numpad. Essenziell für Gaming-Layouts, in denen dieselbe Ziffer auf der Hauptreihe versus dem Ziffernblock Verschiedenes bedeutet.
• Modifikator-Badges. Ctrl, Alt, Shift und Meta (Command unter macOS, Super/Windows anderswo) werden in konventioneller Reihenfolge gezeigt, sodass Sie einen Akkord auf einen Blick lesen können.
• Veraltete Felder, klar markiert. keyCode und which sind veraltet und aus modernen Spezifikationen entfernt, aber viel bestehender Code liest sie noch. Sie werden mit einem sichtbaren veraltet-Tag und einer Fußnote ausgewiesen, nie als primäre Antwort.
• Rollierender Verlauf von 20. Halten Sie eine Taste und beobachten Sie, wie Wiederholung bei jedem Auto-Feuer auf ja kippt; drücken Sie eine Sequenz und gehen Sie sie rückwärts durch. Jeder Eintrag ist ein isolierter Snapshot.
• Eingegrenzte Erfassung. Der Listener ist an die Erfassungszone gebunden, nicht an das Fenster. Der Rest der Seite — Tabben, Scrollen — funktioniert weiter, bis Sie die Zone wieder fokussieren.

Anwendungsbeispiel#

Eine klassische Quelle der Verwirrung ist der Unterschied zwischen der 1 in der oberen Reihe und der 1 auf dem Ziffernblock. Sie erzeugen dasselbe Zeichen, sind aber nicht dieselbe Taste.

Drücken Sie die 1 in der oberen Reihe und der Snapshot liest:

Taste (key)   1
Code (code)   Digit1
keyCode       49      (veraltet)
which         49      (veraltet)
Position      Standard
Wiederholung  nein
Modifikatoren Keine

Drücken Sie nun die 1 auf dem Ziffernblock (mit aktiviertem Num Lock) und der Snapshot liest:

Taste (key)   1
Code (code)   Numpad1
keyCode       97      (veraltet)
which         97      (veraltet)
Position      Ziffernblock
Wiederholung  nein
Modifikatoren Keine

Selbes key, anderer code, andere Position, anderer veralteter Code. Wenn Sie einen Shortcut binden, matchen Sie auf code === "Digit1", um „die Reihe über den Buchstaben“ zu meinen, und auf code === "Numpad1", um „den Ziffernblock“ zu meinen — und Sie vermeiden die Falle, auf key === "1" zu matchen, das für beide feuert.

FAQ#

Soll ich auf key oder auf code matchen?#

Es hängt davon ab, was Sie bauen. Matchen Sie auf code für Shortcuts und Spiele-Steuerungen, wo die physische Position der Taste zählt und Sie nicht wollen, dass sich die Bindung ändert, wenn der Nutzer auf ein Dvorak- oder nicht-lateinisches Layout wechselt. Matchen Sie auf key für Texteingabe, wo das erzeugte Zeichen ist, was Sie interessiert (? versus / oder über Dead-Keys zusammengesetzte Zeichen). Für Modifikator-Akkorde prüfen Sie die Modifikator-Flags (ctrlKey, metaKey, …) statt des key-Werts des Modifikators selbst.

Warum sind keyCode und which als „veraltet“ markiert?#

Sie sind veraltet und aus der UI-Events-Spezifikation entfernt. Browser füllen sie weiterhin aus Kompatibilitätsgründen, aber ihre Werte waren nie über Browser oder Layouts hinweg konsistent (dieselbe physische Taste konnte unterschiedliche Zahlen melden). Moderner Code sollte key und code lesen. Sie werden hier nur gezeigt, damit Sie älteren Code debuggen oder portieren können, der noch von den Zahlen abhängt — verwenden Sie sie nie für neue Bindungen.

Die Seite erfasst meine Tastendrücke nicht. Warum?#

Die Erfassung ist auf die gestrichelte Zone beschränkt. Wenn der Fokus woanders hingewandert ist — weil Sie hinausgetabbt sind oder ein anderes Steuerelement angeklickt haben — hört die Zone zu lauschen auf. Klicken Sie wieder in die Zone hinein (sie hebt sich hervor) und die Drucke werden wieder registriert. Diese Eingrenzung ist Absicht: Sie hält den Rest der Seite tastaturzugänglich.

Heißt die Meta-Taste Command oder Windows?#

Beides — Meta ist die „Super“-Taste der Plattform: Command unter macOS, die Windows-/Super-Taste unter Linux und Windows. Das Badge liest Meta, anstatt das Betriebssystem zu raten, weil das zugrunde liegende Feld metaKey ist, das Ihr Code tatsächlich testen muss.