Drei Eigenschaften, drei verschiedene Fragen
Ein KeyboardEvent bietet mehrere Möglichkeiten, eine Taste zu identifizieren, und sie beantworten tatsächlich verschiedene Fragen. event.key ist das Zeichen oder der benannte Wert, den der Tastendruck nach Anwendung von Layout und Modifikatoren erzeugt. Die physische A-Taste liefert a, oder A bei gehaltenem Shift, oder einen völlig anderen Buchstaben auf einem Dvorak- oder AZERTY-Layout. Benannte Tasten kommen als beschreibende Zeichenfolgen wie Enter, Escape, ArrowLeft und F5.
event.code identifiziert stattdessen die physische Tastenposition, mit einem layoutunabhängigen Namen, abgeleitet von einer gedachten US-Tastatur. Die Taste an der Position von A ist immer KeyA, egal was das Layout des Nutzers erzeugt. Ziffern in der oberen Reihe sind Digit1 bis Digit0, und der Ziffernblock meldet Numpad1 und Gefährten, sodass du die beiden Ziffernreihen unterscheiden kannst.
event.keyCode und sein Zwilling event.which sind die veralteten numerischen Kennungen. Beide sind formell veraltet, beide noch überall implementiert, und beide sind für Satzzeichen über Browser hinweg inkonsistent. Sie lohnen sich beim Warten älteren Codes zu lesen, aber neue Shortcut-Behandlung sollte key oder code verwenden.
Wahl zwischen key und code
Die Daumenregel ist einfach: verwende code, wenn die Position wichtig ist, und key, wenn die Bedeutung wichtig ist. Ein Spiel, das Bewegung an WASD bindet, will code, weil der physische Block unter der linken Hand auf einem AZERTY-Layout an derselben Stelle bleiben soll, obwohl er ZQSD erzeugt. Ein Texteditor, der „Speichern" an Strg+S bindet, will key, weil der Nutzer in Begriffen des Buchstabens S denkt und nicht der Taste neben A.
Modifikator-Flags sind separate Booleans: ctrlKey, shiftKey, altKey und metaKey. Prüfe sie explizit, statt sie aus key zu folgern, und denk daran, dass der primäre Shortcut-Modifikator auf macOS Command und anderswo Control ist. Ein gängiges Muster ist, event.metaKey || event.ctrlKey zu akzeptieren, sodass ein Handler beiden Plattformen gerecht wird.
event.location unterscheidet verdoppelte Tasten. Sie ist 0 für eine Standardtaste, 1 für das linke Mitglied eines Paares wie die linke Umschalt-Taste, 2 für das rechte, und 3 für eine Taste auf dem Ziffernblock.
Praktische Fallstricke
Nicht jede Taste erzeugt die Ereignisse, die du erwartest. Der Browser reserviert manche Kombinationen für sich selbst – Strg+W, Strg+T und Command+Q schließen typischerweise Tabs oder beenden die Anwendung, bevor eine Seite sie je sieht, und preventDefault kann sie nicht zurückholen. Teste jeden Shortcut in einem echten Browserfenster, statt anzunehmen, er erreiche deinen Handler.
Halten einer Taste erzeugt einen Strom von Wiederholungsereignissen mit event.repeat auf wahr nach dem ersten. Ignoriere Wiederholungen, wenn der Shortcut einmal auslösen soll, und respektiere sie, wenn das Verhalten kontinuierlich ist, wie Scrollen oder Cursor-Bewegung.
Schließlich beschreiben keydown und keyup Tasten, während keypress Zeichen beschrieb und aus dem Standard entfernt wurde. Für Texteingabe bevorzuge das Hören auf das input-Ereignis oder das Lesen von beforeinput, die Komposition, Autovervollständigung und mobile Tastaturen weitaus zuverlässiger handhaben als jedes tastenebene Ereignis kann.