So erkennst du die Leertaste
document.addEventListener('keydown', (event) => {
if (event.key === " ") {
// Space 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 je nach Browser und Layout.
So verhalten sich Browser bei der Leertaste
Der key-Wert ist ein einzelnes Leerzeichen, nicht „Space“. Die Leertaste aktiviert Buttons und Checkboxen und scrollt die Seite, wenn nichts anderes sie verarbeitet. Rufe preventDefault() auf, wenn dein eigenes Steuerelement sie nutzt, sonst springt die Seite.
In React
<input onKeyDown={(e) => { if (e.key === " ") { /* … */ } }} />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 die Leertaste?
32. Er ist allerdings veraltet: Verwende im neuen Code besser event.key („ (ein Leerzeichen)“) oder event.code (Space).
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 auslöst. event.code ist die physische Position der Taste und auf jedem Layout gleich.
Sollte ich keydown oder keypress verwenden?
keydown. Das keypress-Event ist veraltet und wird bei Tasten, die keine Zeichen erzeugen, nicht ausgelöst, etwa Escape oder die Pfeiltasten.