Element: input event

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("input", (event) => { })

oninput = (event) => { }

Ereignistyp

Ein InputEvent. Erbt von UIEvent.

Beschreibung

Bei <input>-Elementen mit type=checkbox oder type=radio sollte das input-Ereignis ausgelöst werden, wenn ein Benutzer das Steuerelement umschaltet. Dies war jedoch historisch nicht immer der Fall. Prüfen Sie die Kompatibilität oder verwenden Sie stattdessen das change-Ereignis für Elemente dieser Typen.

Bei Text-Steuerelementen wird das input-Ereignis ausgelöst, während der Benutzer den Wert bearbeitet. Dies unterscheidet sich vom change-Ereignis, das nur ausgelöst wird, wenn der Wert übernommen wird, etwa wenn das Steuerelement den Fokus verliert.

Bei <select>-Elementen, die als Listenfelder angezeigt werden (z. B. <select size="3">), kann die Auswahl von Optionen mit der Maus den value ändern, während die Maustaste noch gedrückt gehalten wird. Die Ereignisse input und change werden aufgeschoben, bis die Maustaste losgelassen wird, anstatt bei jeder Zwischenauswahl ausgelöst zu werden. Wenn der Benutzer vor dem Loslassen der Taste zu einer anderen Option und wieder zurück zur ursprünglichen Auswahl zieht, werden die Auswahländerungen während des Ziehens möglicherweise gemeldet oder auch nicht; das Verhalten unterscheidet sich zwischen Browsern.

Im Allgemeinen wird erwartet, dass nur vom Benutzer ausgelöste Wertänderungen, einschließlich Autofill, input auslösen. Einige Änderungen am Wert eines Steuerelements lösen das input-Ereignis überhaupt nicht aus, zum Beispiel:

• Programmgesteuertes Setzen des Werts, etwa durch Zuweisen zu value eines Elements oder zu selectedIndex eines <select>-Elements.
• Ändern der Kindelemente eines Steuerelements auf eine Weise, die seinen Wert ändert, etwa durch Entfernen der ausgewählten <option> aus einem <select>-Element.
• Ändern der Attribute eines Steuerelements auf eine Weise, die dazu führt, dass der Browser seinen Wert anpasst, etwa durch Ändern von min oder max einer Bereichseingabe, sodass ihr aktueller Wert außerhalb der neuen Grenzen liegt.
• Zurücksetzen eines Formulars, wodurch nur ein reset-Ereignis ausgelöst wird.
• Wiederherstellen gespeicherter Formularwerte durch den Browser während der Verlauf-Navigation. Welche Steuerelemente ihre Werte wiederhergestellt bekommen, kann sich zwischen Browsern unterscheiden.
• Chrome löscht nicht bearbeitete, automatisch ausgefüllte Benutzernamen und Passwörter, wenn die Anmeldedaten nicht mehr verfügbar sind, etwa wenn sich der Benutzer nach dem automatischen Ausfüllen bei Chrome abgemeldet hat.

Beispiele

Dieses Beispiel protokolliert den Wert jedes Mal, wenn Sie den Wert des <input>-Elements ändern.

HTML

<input placeholder="Enter some text" name="name" />
<p id="values"></p>

JavaScript

const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("input", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwandte Ereignisse
  • beforeinput
  • change
  • invalid