Element: input event

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Das input-Ereignis wird ausgelöst, wenn der value eines <input>, <select> oder <textarea>-Elements aufgrund einer direkten Benutzeraktion (wie das Tippen in eine Textbox oder das Aktivieren eines Kontrollkästchens) geändert wurde.

Das Ereignis gilt auch für Elemente mit aktiviertem contenteditable und für jedes Element, wenn designMode aktiviert ist. Im Fall von contenteditable und designMode ist das Ereignisziel der Bearbeitungshost. Wenn diese Eigenschaften auf mehrere Elemente zutreffen, ist der Bearbeitungshost das nächste Vorfahrelement, dessen übergeordnetes Element nicht bearbeitbar ist.

Für <input>-Elemente mit type=checkbox oder type=radio sollte das input-Ereignis immer dann ausgelöst werden, wenn ein Benutzer das Steuerelement umschaltet, gemäß der HTML Living Standard Spezifikation. Historisch gesehen war dies jedoch nicht immer der Fall. Überprüfen Sie die Kompatibilität oder verwenden Sie stattdessen das change-Ereignis für Elemente dieser Typen.

Für <textarea> und <input>-Elemente, die Texteingaben annehmen (type=text, type=tel, etc.), ist die Schnittstelle InputEvent; für andere ist die Schnittstelle Event.

Das input-Ereignis wird jedes Mal ausgelöst, wenn sich der value des Elements ändert. Dies ist anders als das change-Ereignis, das nur ausgelöst wird, wenn der Wert festgelegt wird, wie zum Beispiel durch das Drücken der Eingabetaste oder das Auswählen eines Werts aus einer Liste von Optionen. Beachten Sie, dass das input-Ereignis nicht ausgelöst wird, wenn JavaScript den value eines Elements programmgesteuert ändert.

Syntax

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

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

oninput = (event) => { }

<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;
}