So erkennst du Alt / Option
document.addEventListener('keydown', (event) => {
if (event.key === 'Alt') {
// Alt / Option was pressed
}
});Verwende event.key, um auf die Bedeutung der Taste zu reagieren (sie folgt dem Tastaturlayout), und event.code für ihre physische Position, zum Beispiel WASD in Spielen. keyCode und which sind veraltet: Sie funktionieren noch, aber ihre Werte unterscheiden sich zwischen Browsern und Layouts.
So behandeln Browser Alt / Option
Prüfe event.altKey. Auf vielen europäischen Tastaturen ist die rechte Alt-Taste AltGr (event.key === "AltGraph") und tippt Zeichen wie @ oder €. Vermeide daher Strg+Alt-Kürzel, die damit kollidieren. Auf einem Mac ändert Option event.key zu Sonderzeichen. Verwende für Option-Kürzel event.code.
In React
<input onKeyDown={(e) => { if (e.key === 'Alt') { /* … */ } }} />JavaScript Keycode Finder
Drück eine beliebige Taste und sieh sofort alle Eigenschaften des Keyboard-Events, dazu ein kopierfertiges keydown-Snippet für Shortcuts.
Häufige Fragen
Was ist der keyCode für Alt / Option?
18. Er ist allerdings veraltet. Verwende in neuem Code event.key („Alt“) oder event.code (AltLeft).
Was ist der Unterschied zwischen event.key und event.code?
event.key ist das Zeichen oder die Aktion, die die Taste mit dem aktuellen Layout erzeugt. event.code ist die physische Tastenposition, die auf jedem Layout gleich ist.
Soll ich keydown oder keypress verwenden?
keydown. Das Ereignis keypress ist veraltet und wird bei Tasten, die keine Zeichen erzeugen, wie Escape oder den Pfeiltasten, nicht ausgelöst.