Tastureingaben und Mausaktionen mit JavaScript
![[Bildschirmfoto]
Tastureingaben und Mausaktionen mit JavaScript [Bildschirmfoto]
Tastureingaben und Mausaktionen mit JavaScript](img/tastatureingaben.png)
Tastatur-Ereignisse (Objekte) beschreiben eine Benutzerinteraktion mit der Tastatur (Keyboard), jede Eingabe beschreibt dabei ein Ereignis.
🖮 Taste betätigen
Tastatur-Ereignisse abfangen
Beispiel: Mehrere Tastatureingaben mit Zahlen
STRG / UMSCHALT / ALT / ALTGr / CapsLock + 🖰 Maustaste klicken
🖰 Maustasten klicken (links, mitte, rechts)
Mausrad drehen
Beispiel: Zahl in einem Eingabefeld mit dem Mausrad verändern
🖰 Objekt mit der Maus verschieben

Beispiel: Sortierkasten - Objekte über "Ziehen und Ablegen" (drag & drop) sortieren
Tastatur-Ereignisse abfangen
Beispiele wie Tastatur-Ereignisse eines Benutzers mit JavaScript abgefangen werden können.
<script> window.addEventListener("DOMContentLoaded", () => { window.addEventListener("keydown", function(event) { if (event.key == "Enter") { // ... } if (event.code == "Enter") { // ... } if (event.keyCode == 13) { // keyCode ist veraltet! // ... } if (event.charCode == 13) { // charCode ist veraltet! // ... } }, true); }); </script>
Verwenden Sie die Eigenschaften der KeyboardEvent-Schnittstelle key
oder code
um den
Wert der vom Benutzer gedrückten Taste zurück zugeben, keyCode
und charCode
wurden aus den Webstandards entfernt.
• Um ein JavaScript-Ereignis mit der Tastatur auszulösen, benutzen Sie am besten keydown
, siehe: Liste der Event Handler.
• Für manche Tastatureingaben wird zusätzlich event.preventDefault();
benötigt, um die Standardaktion des Browsers aufzuheben.
Alphabet
// A if (event.code == "KeyA") { ... }
// B if (event.code == "KeyB") { ... }
// C if (event.code == "KeyC") { ... }
// X if (event.code == "KeyX") { ... }
// Y (⚠ engl. Tastatur!)
if (event.code == "KeyZ") {
...
}
// Z (⚠ engl. Tastatur!)
if (event.code == "KeyY") {
...
}
Alphabet (Großbuchstaben)
Buchstabe und Umschalttaste (shiftKey)
// A if (event.code == 'KeyA' && event.shiftKey) { ... }
// B if (event.code == 'KeyB' && event.shiftKey) { ... }
// C if (event.code == 'KeyC' && event.shiftKey) { ... }
Neben shiftKey
(Umschalttaste) kann noch ctrlKey
(Steuerung) und altKey
(Alt) verwendet werden.
Deutsche Umlaute
// Ä if (event.code == "Quote") { ... }
// Ö if (event.code == "Semicolon") { ... }
// Ü if (event.code == "BracketLeft") { ... }
Ziffern
// 0 (Ziffernblock) if (event.code == "Numpad0") { ... }
// 9 (Ziffernblock) if (event.code == "Numpad9") { ... }
// ALT + 0 (Ziffernblock) if (event.getModifierState("Alt") && event.code == "Numpad0") { ... }
// ALT + 9 (Ziffernblock) if (event.getModifierState("Alt") && event.code == "Numpad9") { ... }
// STRG + 0 (Ziffernblock) if (event.getModifierState("Control") && event.code == "Numpad0") { event.preventDefault(); ... }
// STRG + 9 (Ziffernblock) if (event.getModifierState("Control") && event.code == "Numpad9") { event.preventDefault(); ... }
// 1 (Buchstabenblock) if (event.code == "Digit1") { ... }
// 0 (Buchstabenblock) if (event.code == "Digit0") { ... }
// UMSCHALT + 1 (Buchstabenblock) if (event.code == "Digit1" && event.getModifierState("Shift") == true) { ... }
// UMSCHALT + 0 (Buchstabenblock) if (event.code == "Digit0" && event.getModifierState("Shift") == true) { ... }
Pfeiltasten
// UMSCHALT + Pfeiltaste Links if (event.getModifierState("Shift") && event.code == "ArrowLeft") { event.preventDefault(); ... }
// UMSCHALT + Pfeiltaste Rechts if (event.getModifierState("Shift") && event.code == "ArrowRight") { event.preventDefault(); ... }
// ALT + Pfeiltaste Ab if (event.getModifierState("Alt") && event.code == "ArrowDown") { event.preventDefault(); ... }
// ALT + Pfeiltaste Auf if (event.getModifierState("Alt") && event.code == "ArrowUp") { event.preventDefault(); ... }
// STRG + Pfeiltaste Ab if (event.getModifierState("Control") && event.code == "ArrowDown") { event.preventDefault(); ... }
// STRG + Pfeiltaste Auf if (event.getModifierState("Control") && event.code == "ArrowUp") { event.preventDefault(); ... }
F-Tasten
// F1 if (event.code == "F1") { event.preventDefault(); ... }
// F2 if (event.code == "F2") { ... }
// F12 if (event.code == "F12") { event.preventDefault(); ... }
Diverse
// STRG + A if (event.getModifierState("Control") && event.code == "KeyA") { event.preventDefault(); ... }
// ESC if (event.code == "Escape") { ... }
// * (Stern) if (event.key == "+" && event.code != "NumpadAdd") { ... }
// - Minus (Ziffernblock) if (event.code == "NumpadSubtract") { ... }
// + Plus (Ziffernblock) if (event.code == "NumpadAdd") { ... }
// ContextMenu if (event.code == "ContextMenu") { ... }
// Space if (event.code == "Space") { ... }
// Backspace if (event.code == "Backspace") { ... }
// Insert if (event.code == "Insert") { ... }
// Delete if (event.code == "Delete") { ... }
// Enter if (event.code == "Enter") { ... }
// Enter if (event.code == "NumpadEnter") { ... }
// ALT + Ziffernblock if ( event.getModifierState("Alt") && (event.code == "Numpad0" || event.code == "Numpad1" || event.code == "Numpad2" || event.code == "Numpad3" || event.code == "Numpad4" || event.code == "Numpad5" || event.code == "Numpad6" || event.code == "Numpad7" || event.code == "Numpad8" || event.code == "Numpad9") ) { ... } // STRG + Ziffernblock if ( event.getModifierState("Control") && (event.code == "Numpad0" || event.code == "Numpad1" || event.code == "Numpad2" || event.code == "Numpad3" || event.code == "Numpad4" || event.code == "Numpad5" || event.code == "Numpad6" || event.code == "Numpad7" || event.code == "Numpad8" || event.code == "Numpad9") ) { event.preventDefault(); ... } // Buchstabenblock if ( (event.code == "Digit1" || event.code == "Digit2" || event.code == "Digit3" || event.code == "Digit4" || event.code == "Digit5" || event.code == "Digit6" || event.code == "Digit7" || event.code == "Digit8" || event.code == "Digit9" || event.code == "Digit0") && event.getModifierState("Shift") == false ) { ... } // UMSCHALT + Buchstabenblock if ( (event.code == "Digit1" || event.code == "Digit2" || event.code == "Digit3" || event.code == "Digit4" || event.code == "Digit5" || event.code == "Digit6" || event.code == "Digit7" || event.code == "Digit8" || event.code == "Digit9" || event.code == "Digit0") && event.getModifierState("Shift") == true ) { ... } // Ziffernblock if ( event.code == "Numpad0" || event.code == "Numpad1" || event.code == "Numpad2" || event.code == "Numpad3" || event.code == "Numpad4" || event.code == "Numpad5" || event.code == "Numpad6" || event.code == "Numpad7" || event.code == "Numpad8" || event.code == "Numpad9" ) { ... }