Element: input — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("input", handler)

Beschreibung

Das input-Ereignis wird bei jeder einzelnen Wertänderung ausgelöst, die direkt vom Benutzer ausgeht: bei jedem Tastendruck, beim Einfügen, Ausschneiden, Löschen, bei Autovervollständigung, Spracheingabe oder beim Ziehen eines Schiebereglers (type="range"). Es feuert außerdem bei Elementen mit contenteditable und bei Dokumenten im designMode.

Im Gegensatz zu change, das bei Textfeldern erst nach dem Verlassen des Felds (Fokusverlust) ausgelöst wird, eignet sich input für Live-Reaktionen: Suchvorschläge, Zeichenzähler, Validierung während der Eingabe oder das Synchronisieren von Zustand in einer Oberfläche.

Das Ereignisobjekt ist ein InputEvent (bei manchen Elementtypen, z. B. Checkbox oder Select, auch ein einfaches Event). InputEvent bietet unter anderem data (eingefügter Text), inputType (z. B. "insertText", "deleteContentBackward", "insertFromPaste") und isComposing (IME-Eingabe läuft). Das Ereignis steigt auf (bubbles) und lässt sich daher per Event-Delegation an einem Formular abfangen; es ist nicht abbrechbar – wer eine Eingabe verhindern will, muss beforeinput verwenden.

Alternativ zu addEventListener kann der Handler über die Eigenschaft element.oninput = handler gesetzt werden; dabei ist pro Element nur ein Handler möglich.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"input"`.
$handler Pflicht	(event: InputEvent \| Event) => void		Callback, der bei jeder Wertänderung aufgerufen wird. `event.target` verweist auf das geänderte Element.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `capture`, `once`, `passive` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein InputEvent (bzw. Event).

Beispiele

Live-Zeichenzähler für ein Textfeld

const textarea = document.querySelector('#nachricht');
const zaehler = document.querySelector('#zaehler');
const max = 280;

textarea.addEventListener('input', (event) => {
  const laenge = event.target.value.length;
  zaehler.textContent = `${laenge}/${max}`;
  zaehler.classList.toggle('zu-lang', laenge > max);
});

Bei Eingabe von "Hallo": Zähler zeigt "5/280"

Suchfeld mit Debounce und AbortController zum Entfernen

const suchfeld = document.querySelector('#suche');
const controller = new AbortController();

const debounce = (fn, ms) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
};

const suchen = debounce(async (begriff) => {
  if (begriff.length < 2) return;
  const res = await fetch(`/api/suche?q=${encodeURIComponent(begriff)}`);
  const treffer = await res.json();
  console.log('Treffer:', treffer.length);
}, 300);

suchfeld.addEventListener('input', (e) => suchen(e.target.value.trim()), {
  signal: controller.signal
});

// Später: Listener wieder entfernen
// controller.abort();

Treffer: 12

inputType auswerten und IME-Eingabe berücksichtigen

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

const protokolliere = (event) => {
  if (event.isComposing) return; // z. B. japanische Eingabe noch nicht abgeschlossen
  console.log(event.inputType, JSON.stringify(event.data));
};

feld.addEventListener('input', protokolliere);

// Handler wieder entfernen – gleiche Funktionsreferenz nötig
feld.removeEventListener('input', protokolliere);

insertText "a" deleteContentBackward null insertFromPaste "Beispiel"

Delegation am Formular über die oninput-Eigenschaft

const formular = document.querySelector('#einstellungen');
const vorschau = document.querySelector('#vorschau');

// input steigt auf – ein Handler für alle Felder
formular.oninput = (event) => {
  const { name, value, type, checked } = event.target;
  const wert = type === 'checkbox' ? checked : value;
  vorschau.style.setProperty(`--${name}`, wert);
  console.log(`${name} = ${wert}`);
};

// Entfernen:
// formular.oninput = null;

schriftgroesse = 18

// Wichtig · Fallstricke

Keine Auslösung bei programmatischen Änderungen: el.value = 'x' löst kein input aus. Falls nötig, manuell mit el.dispatchEvent(new Event('input', { bubbles: true })) auslösen.
Nicht abbrechbar: event.preventDefault() hat keine Wirkung. Zum Verhindern oder Filtern von Eingaben beforeinput verwenden (bzw. den Wert nachträglich korrigieren – Achtung: das verschiebt oft den Cursor).
Performance: Das Ereignis feuert bei jedem Tastendruck. Teure Aktionen (Netzwerkanfragen, aufwendiges Rendern) per Debounce/Throttle drosseln.
IME/Composition: Bei asiatischen Eingabemethoden feuert input auch während der Zusammensetzung; event.isComposing prüfen oder auf compositionend reagieren.
Checkbox/Radio/Select: Moderne Browser lösen input auch hier aus; ältere Browser (Legacy-Edge, alte Safari-Versionen) nur change. Für maximale Kompatibilität bei diesen Elementen change verwenden.
Sicherheit: Eingabewerte nie per innerHTML ausgeben (XSS) – stattdessen textContent nutzen.
Beim Entfernen per removeEventListener muss exakt dieselbe Funktionsreferenz und dieselbe capture-Option übergeben werden.

Siehe auch

CloseWatcher: close Element: cut Element: blur Element: copy Element: focus