Dasinput-Ereignis wird ausgelöst, wenn dervalue eines<input>,<select> oder<textarea>-Elements direkt durch eine Benutzeraktion (wie das Tippen in einem Textfeld oder das Ankreuzen eines Kontrollkästchens) geändert wurde.

Das Ereignis gilt auch für Elemente mit aktiviertemcontenteditable und für jedes Element, wenndesignMode aktiviert ist. Im Fall voncontenteditable unddesignMode ist das Ereignisziel derBearbeitungs-Host. Wenn diese Eigenschaften auf mehrere Elemente zutreffen, ist der Bearbeitungs-Host das nächste Vorfahrenelement, dessen übergeordnetes Element nicht bearbeitbar ist.

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

Für<textarea> und<input>-Elemente, die Texteingaben akzeptieren (type=text,type=tel, etc.), ist die SchnittstelleInputEvent; für andere ist die SchnittstelleEvent.

Dasinput-Ereignis wird jedes Mal ausgelöst, wenn sich dervalue des Elements ändert. Dies unterscheidet sich vomchange-Ereignis, das nur ausgelöst wird, wenn der Wert endgültig festgelegt wird, z.B. durch Drücken der Enter-Taste oder Auswählen eines Wertes aus einer Liste von Optionen. Beachten Sie, dass dasinput-Ereignis nicht ausgelöst wird, wenn JavaScript denvalue eines Elements programmatisch ändert.

Syntax

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

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

Ereignistyp

EinInputEvent. Erbt vonUIEvent.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von ihren Eltern,UIEvent undEvent.

InputEvent.dataSchreibgeschützt

Gibt einen String mit den eingefügten Zeichen zurück. Dies kann ein leerer String sein, wenn die Änderung keinen Text einfügt (zum Beispiel beim Löschen von Zeichen).

InputEvent.dataTransferSchreibgeschützt

Gibt einDataTransfer-Objekt zurück, das Informationen über reichhaltige oder einfache Textdaten enthält, die zu bearbeitbarem Inhalt hinzugefügt oder davon entfernt werden.

InputEvent.inputTypeSchreibgeschützt

Gibt den Typ der Änderung für bearbeitbaren Inhalt zurück, wie zum Beispiel das Einfügen, Löschen oder Formatieren von Text.

InputEvent.isComposingSchreibgeschützt

Gibt einenBoolean-Wert zurück, der angibt, ob das Ereignis nachcompositionstart und vorcompositionend ausgelöst wird.

Beispiele

Dieses Beispiel protokolliert den Wert, wann immer Sie den Wert des<input>-Elements ändern.

HTML

<input placeholder="Enter some text" name="name" /><p></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