Tastureingaben und Mausaktionen mit JavaScript

[Bildschirmfoto / Grafik]
 Tastureingaben und Mausaktionen mit JavaScript

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) { // (Veraltet!)
       // ...
      }

      if (event.charCode == 13) { // (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") {
 ...
}
 bis
// X
if (event.code == "KeyX") {
 ...
}
// Y ( engl. Tastatur!)
if (event.code == "KeyZ") {
 ...
}
// Z ( engl. Tastatur!)
if (event.code == "KeyY") {
 ...
}

Alphabet (Großbuchstaben)

Umschalttaste und Buchstabe

// A
if (event.code === 'KeyA' && event.ctrlKey) {
  ...
}
// B
if (event.code === 'KeyB' && event.ctrlKey) {
  ...
}
// C
if (event.code === 'KeyC' && event.ctrlKey) {
  ...
}

Deutsche Umlaute

// Ä
if (event.code == "Quote") {
 ...
}
// Ö
if (event.code == "Semicolon") {
 ...
}
// Ü
if (event.code == "BracketLeft") {
 ...
}

Ziffern

// 0 (Ziffernblock)
if (event.code == "Numpad0") {
 ...
}
 bis
// 9 (Ziffernblock)
if (event.code == "Numpad9") {
 ...
}
// ALT + 0 (Ziffernblock)
if (event.getModifierState("Alt") && event.code == "Numpad0") {
 ...
}
 bis
// ALT + 9 (Ziffernblock)
if (event.getModifierState("Alt") && event.code == "Numpad9") {
 ...
}
// STRG + 0 (Ziffernblock)
if (event.getModifierState("Control") && event.code == "Numpad0") {
 event.preventDefault();
 ...
}
 bis
// STRG + 9 (Ziffernblock)
if (event.getModifierState("Control") && event.code == "Numpad9") {
 event.preventDefault();
 ...
}
// 1 (Buchstabenblock)
if (event.code === "Digit1") {
 ...
}
 bis
// 0 (Buchstabenblock)
if (event.code === "Digit0") {
 ...
}
// UMSCHALT + 1 (Buchstabenblock)
if (event.code === "Digit1" && event.getModifierState("Shift") == true) {
 ...
}
 bis
// 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") {
 ...
}
 bis
// 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") {
 ...
}