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) { // 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") {
 ...
}

bis

// 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") {
 ...
}

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") {
 ...
}

// 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"
  ) {
  ...
}