Tastaturereignis-Tester

event.key: der logische Schlüsselwert — was der Schlüssel basierend auf Tastaturlayout und Modifiern erzeugt. "a" ohne Modifizierer, "A" mit Shift, "Enter", "ArrowLeft". Locale-abhängig. event.code: der physische Ort des Schlüssels auf der Tastatur, unabhängig vom Layout. "KeyA", "Enter", "ArrowLeft", "Digit1". Der gleiche Code unabhängig davon, ob Shift gehalten wird. event.keyCode (veraltet): ein numerischer Code. Variiert je nach Browser und Betriebssystem. Verwenden Sie stattdessen event.key oder event.code. Best Practice: Verwenden Sie event.key für Zeicheneingaben, event.code für positionsabhängige Verknüpfungen (wie WASD in Spielen).

Überprüfen Sie boolesche Eigenschaften des Events: event.ctrlKey, event.shiftKey, event.altKey, event.metaKey (⌘ auf Mac, ⊞ auf Windows). Beispiel: if (event.ctrlKey && event.key === "s") saveDraft(). Die Modifizierertasten selbst auslösen keydown-Events mit Schlüsselwerten "Control", "Shift", "Alt", "Meta". Für plattformübergreifende Verknüpfungen: Verwenden Sie ctrlKey für Ctrl unter Windows/Linux, aber metaKey für ⌘ auf Mac: const isModKey = event.ctrlKey || event.metaKey. KeyboardEvent.getModifierState("CapsLock") überprüft beständige Modifizierer-Status.

keydown: wird ausgelöst, wenn die Taste zuerst gedrückt wird. Wird wiederholt ausgelöst, wenn die Taste gehalten wird. Funktioniert für alle Tasten einschließlich Ctrl, Shift, Pfeiltasten. Beste Anwendung: Verknüpfungen, Spielesteuerung, Standard verhindern. keypress (veraltet): wird nur für Tasten ausgelöst, die Zeichen erzeugen. Wird nicht für Pfeiltasten, Rücktaste usw. ausgelöst. Veraltet zugunsten von keydown + event.key. keyup: wird ausgelöst, wenn die Taste losgelassen wird. Wird nur einmal pro Tastendruck ausgelöst. Beste Anwendung: Erkennung, wenn eine Taste gedrückt wurde, ohne zu wiederholen. Input-Events (input, change): besser zur Verfolgung von Texteingaben als Keyboard-Events.

Rufen Sie event.preventDefault() im keydown-Handler auf. Beispiel: document.addEventListener("keydown", (e) => { if (e.ctrlKey && e.key === "s") { e.preventDefault(); save(); } }). Einschränkungen: Einige Betriebssystem-Verknüpfungen (Ctrl+Alt+Delete, Win-Taste, Mission Control) können nicht verhindert werden. Browser-Verknüpfungen variieren je nach Browser. In iframes können einige Verknüpfungen vom übergeordneten Element abgefangen werden. React Synthetic Events: event.nativeEvent.preventDefault() oder event.preventDefault() funktionieren beide. Hinweis: event.stopPropagation() verhindert, dass das Event propagiert, verhindert aber nicht das Browser-Standardverhalten.

React verwendet Synthetic Events: onKeyDown, onKeyUp, onKeyPress (veraltet). Beispiel: <input onKeyDown={(e) => { if (e.key === "Enter") submit(); if (e.key === "Escape") cancel(); }}. Für globale Verknüpfungen: Verwenden Sie useEffect zum Hinzufügen/Entfernen von nativen Event-Listenern. Entfernen Sie Listener immer in der Bereinigung: useEffect(() => { const handler = (e) => {...}; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []). Verwenden Sie für komplexe Verknüpfungssysteme Bibliotheken wie react-hotkeys-hook oder tinykeys.