JavaScript keydown und keyup Events

Einführung in Tastaturereignisse in JavaScript

JavaScript-Tastaturereignisse ermöglichen es Ihrer Seite, sofort zu reagieren, wenn ein Benutzer eine Taste drückt oder loslässt. Sie bilden die Grundlage für Such-Eingaben in Echtzeit, Tastaturkürzel, Spielsteuerungen und barrierefreie Navigation. Dieses Kapitel konzentriert sich auf die zwei Ereignisse, die Sie am häufigsten verwenden werden — keydown und keyup — erklärt ihre Unterschiede, erläutert das KeyboardEvent-Objekt, das jeder Handler empfängt, und schließt mit praktischen, ausführbaren Beispielen ab.

Wenn Sie neu im Umgang mit Ereignissen sind, beginnen Sie zunächst mit Einführung in Browser-Events und Event-Handling im DOM.

keydown vs. keyup auf einen Blick

Beide Ereignisse werden auf dem Element ausgelöst, das gerade den Fokus hat (oder auf document, wenn kein bestimmtes Element fokussiert ist). Der Unterschied liegt darin, wann im Lebenszyklus einer Taste sie ausgelöst werden:

Ereignis	Wird ausgelöst, wenn…	Wiederholt beim Gedrückthalten?	Typische Verwendung
`keydown`	Eine Taste gedrückt wird	Ja — wiederholt	Shortcuts, Spielbewegung, Eingabe verhindern
`keyup`	Eine Taste losgelassen wird	Nein — einmal pro Tastendruck	Erkennen des Endes eines Tastendrucks, UI aktualisieren

Ein einzelnes Drücken einer Taste erzeugt ein keydown und dann ein keyup. Wenn eine Taste gedrückt gehalten wird, wird keydown immer wieder ausgelöst (diese automatischen Wiederholungen können Sie mit event.repeat erkennen), aber keyup wird nur einmal ausgelöst, wenn Sie die Taste schließlich loslassen.

Das veraltete keypress-Ereignis ist veraltet und sollte in neuem Code nicht verwendet werden. Um auf den Text zu reagieren, den ein Benutzer tippt, verwenden Sie stattdessen das input-Ereignis.

keydown und keyup verstehen

Das keydown-Ereignis

Das keydown-Ereignis tritt auf, wenn ein Benutzer eine Taste auf der Tastatur drückt. Es wird vor dem Einfügen des Zeichens in ein Feld ausgelöst, weshalb es genau der richtige Ort ist, um event.preventDefault() aufzurufen, wenn Sie eine Eingabe blockieren möchten. Dieses Ereignis ist immer dann nützlich, wenn der Zeitpunkt des Drückens wichtig ist — bei Spielen, Barrierefreiheitsfunktionen oder interaktiven Steuerelementen.

Beispiel für das keydown-Ereignis

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example of Keydown Event</title>
<style>
  .highlight { background-color: yellow; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const inputField = document.getElementById('inputField');
  inputField.addEventListener('keydown', function(event) {
    console.log('Key down:', event.key);
    if (event.key === "Enter") {
      this.classList.add('highlight');
      event.preventDefault(); // Prevents the default action of the enter key
    }
  });
});
</script>
</head>
<body>
<input type="text" id="inputField" placeholder="Press 'Enter' to highlight" />
</body>
</html>

Probier es selbst »

Der Code lauscht auf ein keydown-Ereignis am Eingabefeld und prüft, ob die gedrückte Taste "Enter" ist. Wenn ja, ändert er die Hintergrundfarbe des Eingabefelds auf Gelb (Klasse highlight) und verhindert die standardmäßige Formularübermittlung oder andere Aktionen, die typischerweise mit der Enter-Taste verbunden sind.

Das keyup-Ereignis

Das keyup-Ereignis wird ausgelöst, wenn eine Taste losgelassen wird, nach dem keydown-Ereignis (Hinweis: das veraltete keypress-Ereignis ist veraltet und wird in der modernen Webentwicklung kaum noch verwendet). Dieses Ereignis eignet sich für Fälle, in denen Sie wissen möchten, wann ein Tastendruck abgeschlossen ist, beispielsweise beim Aktualisieren einer Benutzeroberfläche oder beim Steuern von Multimedia-Inhalten.

Beispiel für das keyup-Ereignis

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example of Keyup Event</title>
<style>
  .normal { background-color: transparent; }
  .active { background-color: lightgreen; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const textArea = document.getElementById('textArea');
  textArea.addEventListener('keyup', function(event) {
    console.log('Key up:', event.key);
    if (event.key === "Control") {
      this.classList.remove('active');
      this.classList.add('normal');
    }
  });
  textArea.addEventListener('keydown', function(event) {
    if (event.key === "Control") {
      this.classList.add('active');
    }
  });
});
</script>
</head>
<body>
<textarea id="textArea" rows="4" cols="50" placeholder="Press and release 'Control' to see the effect"></textarea>
</body>
</html>

Probier es selbst »

Dieser Code lässt den Textbereich seine Hintergrundfarbe auf Hellgrün (Klasse active) wechseln, wenn die Control-Taste gedrückt wird, und setzt sie auf transparent (Klasse normal) zurück, wenn die Control-Taste losgelassen wird.

Das KeyboardEvent-Objekt

Jeder keydown- und keyup-Handler empfängt ein KeyboardEvent. Die Kenntnis seiner wichtigsten Eigenschaften ermöglicht es Ihnen, zuverlässige Tastaturlogik zu schreiben.

key vs. code

Diese beiden Eigenschaften sind leicht zu verwechseln, und die Wahl der falschen ist die häufigste Ursache für Tastaturfehler:

event.key — der Zeichen- oder benannte Wert, der erzeugt wird, entsprechend dem Tastaturlayout und den Modifikatoren. Das Drücken der Taste A ergibt "a", oder "A" mit gedrückter Shift-Taste. Benannte Tasten: "Enter", "Escape", "ArrowLeft", " " (Leerzeichen).
event.code — die physische Taste auf der Tastatur, unabhängig von Layout oder Modifikatoren. Dieselbe physische Taste ist immer "KeyA", egal ob der Benutzer a, A tippt oder ein Nicht-QWERTY-Layout verwendet.

Verwenden Sie key, wenn es Ihnen um das Zeichen geht (Texteingabe, Shortcuts, die dem Benutzer angezeigt werden). Verwenden Sie code, wenn es Ihnen um die Position geht — zum Beispiel WASD-Spielsteuerungen, die unabhängig vom Layout funktionieren sollen.

document.addEventListener('keydown', function (event) {
  console.log(event.key, event.code);
});
// Pressing Shift+A on QWERTY logs: "A" "KeyA"
// Pressing the space bar logs:     " " "Space"

Modifikatortasten und Wiederholung

Das Ereignis gibt auch an, welche Modifikatortasten gedrückt sind und ob der Tastendruck eine automatische OS-Wiederholung ist:

event.altKey, event.ctrlKey, event.shiftKey, event.metaKey — boolean-Werte, true solange der jeweilige Modifikator gedrückt ist. (metaKey ist Cmd auf macOS, die Windows-Taste anderswo.)
event.repeat — true, wenn eine gehaltene Taste keydown automatisch erneut auslöst. Prüfen Sie dies, um automatische Wiederholungen zu ignorieren.

document.addEventListener('keydown', function (event) {
  // Cross-platform "save" shortcut, ignoring auto-repeat.
  if ((event.ctrlKey || event.metaKey) && event.key === 's' && !event.repeat) {
    event.preventDefault();
    console.log('Save triggered');
  }
});

Das direkte Lesen der Modifikator-Flags (wie oben) ist robuster als das Verfolgen einer separaten ctrlPressed-Variable, weil die Flags garantiert mit der Realität synchron sind, selbst wenn ein keyup verpasst wird.

Erweiterte Verwendung von Tastaturereignissen in JavaScript

Die Nutzung der Möglichkeiten von Tastaturereignissen wie keydown und keyup kann gewöhnliche Webanwendungen in hochinteraktive, barrierefreie und effiziente Plattformen verwandeln. Im Folgenden werden ihre Verwendungsmöglichkeiten durch komplexere Szenarien wie benutzerdefinierte Hotkeys, Spielsteuerungen und Barrierefreiheitsfunktionen erweitert.

Benutzerdefinierte Hotkeys implementieren

Benutzerdefinierte Hotkeys ermöglichen es Benutzern, Aktionen schnell auszuführen, was die Produktivität und Benutzererfahrung verbessert. Dieses Beispiel zeigt, wie ein einfacher benutzerdefinierter Hotkey (Ctrl + S) erstellt wird, um eine Speicheraktion zu simulieren, die an spezifische Funktionen in echten Anwendungen angepasst werden könnte.

Beispiel für benutzerdefinierte Hotkeys

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Custom Hotkeys Example</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
  let ctrlPressed = false;
  document.addEventListener('keydown', function(event) {
    if (event.key === "Control") {
      ctrlPressed = true;
    }
    // Use toLowerCase() for case-insensitive matching
    if (event.key.toLowerCase() === "s" && ctrlPressed) {
      alert('Saving your progress!');
      event.preventDefault(); // Prevent default to stop other actions like browser shortcuts
    }
  });

  document.addEventListener('keyup', function(event) {
    if (event.key === "Control") {
      ctrlPressed = false;
    }
  });
});
</script>
</head>
<body>
<p>Press <strong>Ctrl + S</strong> to simulate a save action.</p>
</body>
</html>

Probier es selbst »

Spielsteuerungen verwalten

Spielsteuerungen sind entscheidend für browserbasierte Spiele. Dieses Beispiel bietet eine einfache Implementierung von Pfeiltasten-Steuerungen zum Bewegen eines Spielerobjekts innerhalb eines Spielbereichs und stellt ein grundlegendes Framework bereit, das zu komplexeren Spielmechaniken ausgebaut werden kann.

Beispiel für Spielsteuerungen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Game Control Example</title>
<style>
  #gameArea {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
  }
  #player {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    top: 125px;
    left: 125px;
  }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const player = document.getElementById('player');
  // Note: offsetLeft/Top don't account for container padding or scroll offsets.
  // For production, consider using getBoundingClientRect() or adding padding offsets.
  let posX = player.offsetLeft;
  let posY = player.offsetTop;
  document.addEventListener('keydown', function(event) {
    switch (event.key) {
      case "ArrowUp":
        posY -= 10;
        break;
      case "ArrowDown":
        posY += 10;
        break;
      case "ArrowLeft":
        posX -= 10;
        break;
      case "ArrowRight":
        posX += 10;
        break;
    }
    player.style.left = posX + 'px';
    player.style.top = posY + 'px';
  });
});
</script>
</head>
<body>
<div id="gameArea">
  <div id="player"></div>
</div>
<p>Use arrow keys to move the red square within the game area.</p>
</body>
</html>

Probier es selbst »

Barrierefreiheit verbessern

Verbesserungen der Barrierefreiheit helfen dabei, Webanwendungen für Menschen mit Behinderungen nutzbar zu machen. Dieses Beispiel konzentriert sich auf die Verwendung von keydown-Ereignissen zur Navigation durch Links mithilfe der Pfeiltasten der Tastatur, was eine tastaturgesteuerte Navigation für Benutzer erleichtert, die keine Maus verwenden können.

Beispiel für Barrierefreiheits-Verbesserung

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Accessibility Navigation Example</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const links = document.querySelectorAll('a');
  let currentFocus = 0;
  links[currentFocus].focus();
  document.addEventListener('keydown', function(event) {
    if (event.key === "ArrowDown") {
      currentFocus = (currentFocus + 1) % links.length;
      links[currentFocus].focus();
      event.preventDefault();
    }
    if (event.key === "ArrowUp") {
      currentFocus = (currentFocus - 1 + links.length) % links.length;
      links[currentFocus].focus();
      event.preventDefault();
    }
  });
});
</script>
</head>
<body>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>
<p>Use the Up and Down arrow keys to navigate between the links.</p>
</body>
</html>

Probier es selbst »

Diese Beispiele veranschaulichen nicht nur die technische Implementierung von keydown- und keyup-Ereignissen, sondern demonstrieren auch ihre praktischen Anwendungen zur Verbesserung der Interaktivität und Barrierefreiheit von Webanwendungen. Durch die Integration dieser erweiterten Funktionalitäten können Entwickler ansprechendere und inklusivere Benutzererfahrungen schaffen.

Fazit

Tastaturereignisse wie keydown und keyup sind unverzichtbar für die Erstellung dynamischer und interaktiver Webanwendungen. Merken Sie sich das Wesentliche: keydown wird beim Drücken ausgelöst (und wiederholt), keyup wird einmal beim Loslassen ausgelöst, event.key liefert das Zeichen, während event.code die physische Taste liefert, und die Modifikator-Flags zusammen mit event.repeat ermöglichen den Aufbau robuster Shortcuts. Die obigen Beispiele sind ein Ausgangspunkt, um Tastaturinteraktionen in Ihre eigenen Projekte einzubinden.

Übungen

Übung

Welche Ereignisse verwendet JavaScript zur Erkennung von Tastatureingaben?

keydownkeyupkeypresskeyclick

Einführung in Tastaturereignisse in JavaScript

keydown vs. keyup auf einen Blick

keydown und keyup verstehen

Das keydown-Ereignis

Beispiel für das keydown-Ereignis

Das keyup-Ereignis

Beispiel für das keyup-Ereignis

Das KeyboardEvent-Objekt

key vs. code

Modifikatortasten und Wiederholung

Erweiterte Verwendung von Tastaturereignissen in JavaScript

Benutzerdefinierte Hotkeys implementieren

Beispiel für benutzerdefinierte Hotkeys

Spielsteuerungen verwalten

Beispiel für Spielsteuerungen

Barrierefreiheit verbessern

Beispiel für Barrierefreiheits-Verbesserung

Fazit

Verwandte Kapitel

Übungen