Element: keyup — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("keyup", handler)

Beschreibung

Das keyup-Ereignis wird an das Element mit dem Tastaturfokus gesendet, sobald der Nutzer eine Taste loslässt. Hat kein Element den Fokus, geht das Ereignis an document.body. Es steigt im DOM auf (Bubbling), sodass man es auch zentral auf document oder window abfangen kann. Das Ereignis ist abbrechbar, aber das Abbrechen hat praktisch keine Wirkung, da die Standardaktion der Taste schon bei keydown ausgeführt wurde.

Der Handler erhält ein KeyboardEvent. Die wichtigsten Eigenschaften sind key (der erzeugte Wert, z. B. "a", "Enter", "ArrowLeft"), code (die physische Taste, z. B. "KeyA", unabhängig vom Tastaturlayout) sowie die Modifikator-Flags shiftKey, ctrlKey, altKey und metaKey.

Typische Anwendungsfälle sind Live-Suchen und Eingabevalidierung nach dem Loslassen einer Taste, das Beenden einer Aktion, die bei keydown begonnen hat (z. B. „Leertaste gedrückt halten“ in Spielen), oder das Erkennen, dass eine Modifikatortaste losgelassen wurde. Registriert wird das Ereignis per addEventListener("keyup", …) oder über die Eigenschaft onkeyup.

Wenn es nur um Änderungen am Inhalt eines Eingabefelds geht, ist das input-Ereignis meist die bessere Wahl, weil es auch Einfügen per Maus, Autovervollständigung und Spracheingabe erfasst.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignistyp, hier immer `"keyup"`.
$handler Pflicht	(event: KeyboardEvent) => void \| EventListenerObject		Funktion, die bei jedem Loslassen einer Taste mit einem `KeyboardEvent` aufgerufen wird.
$options	boolean \| AddEventListenerOptions	false	Optional: `capture`, `once`, `passive` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein KeyboardEvent-Objekt.

Beispiele

Losgelassene Taste protokollieren

const input = document.querySelector('#name');

input.addEventListener('keyup', (event) => {
  console.log(`key: ${event.key}, code: ${event.code}`);
});

key: a, code: KeyA

Live-Suche mit Debounce bei keyup

const search = document.querySelector('#search');
let timer;

search.addEventListener('keyup', (event) => {
  if (event.key === 'Escape') {
    search.value = '';
    return;
  }
  clearTimeout(timer);
  timer = setTimeout(async () => {
    const q = encodeURIComponent(search.value.trim());
    if (!q) return;
    const res = await fetch(`/api/suche?q=${q}`);
    const treffer = await res.json();
    console.log(`${treffer.length} Treffer für "${search.value}"`);
  }, 300);
});

5 Treffer für "java"

Gedrückt-Halten mit keydown/keyup (Spielsteuerung)

const pressed = new Set();

const onDown = (e) => pressed.add(e.code);
const onUp = (e) => {
  pressed.delete(e.code);
  console.log(`${e.code} losgelassen, aktiv:`, [...pressed]);
};

document.addEventListener('keydown', onDown);
document.addEventListener('keyup', onUp);

// Später wieder entfernen
const stopControls = () => {
  document.removeEventListener('keydown', onDown);
  document.removeEventListener('keyup', onUp);
};

Space losgelassen, aktiv: []

Variante über die onkeyup-Eigenschaft

const field = document.querySelector('#plz');

field.onkeyup = (event) => {
  const ok = /^\d{5}$/.test(field.value);
  field.classList.toggle('ungueltig', !ok);
};

// Handler entfernen
// field.onkeyup = null;

// Wichtig · Fallstricke

Keine Wiederholung: Anders als keydown feuert keyup beim Gedrückthalten nur einmal, beim Loslassen. event.repeat ist daher immer false.
Zu spät zum Verhindern: preventDefault() in keyup verhindert weder die Texteingabe noch Browser-Kürzel – dafür keydown verwenden.
IME-Eingabe: Während einer Komposition (z. B. Japanisch, Chinesisch) wird keyup ebenfalls ausgelöst; mit event.isComposing prüfen und solche Ereignisse ggf. ignorieren.
Verlorene keyup-Ereignisse: Wechselt der Fokus während eine Taste gedrückt ist (Alt+Tab, Dialog), kommt das keyup eventuell nie an. Bei Spielsteuerungen zusätzlich auf blur des Fensters reagieren und den Zustand zurücksetzen. Auf macOS lösen andere Tasten bei gedrückter Cmd-Taste oft kein keyup aus.
Veraltet: keyCode, which und charCode sind veraltet – stattdessen key bzw. code nutzen.
Mobilgeräte: Virtuelle Tastaturen liefern oft key: "Unidentified" (Android); für Texteingaben besser das input-Ereignis verwenden.
Kompatibilität: in allen modernen Browsern unterstützt; key und code sind Baseline.

Siehe auch

KeyboardEvent KeyboardEvent.key KeyboardEvent.code EventTarget.addEventListener() EventTarget.removeEventListener()