Element: input event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das input-Ereignis tritt auf, wenn der value eines <input>, <select> oder <textarea>-Elements als direktes Ergebnis einer Benutzeraktion (wie das Tippen in ein Textfeld oder das Aktivieren eines Kontrollkästchens) geändert wurde.

Das Ereignis gilt auch für Elemente mit aktivierter contenteditable-Eigenschaft und für jedes Element, wenn designMode eingeschaltet ist. Bei contenteditable und designMode ist das Ereignisziel der Editing Host. Wenn diese Eigenschaften auf mehrere Elemente zutreffen, ist der Editing Host das nächstgelegene überworfene Element, dessen übergeordnetes Element nicht bearbeitbar ist.

Für <input>-Elemente mit type=checkbox oder type=radio sollte das input-Ereignis jedes Mal ausgelöst werden, wenn ein Benutzer die Steuerung 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 dieses Typs.

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

Das input-Ereignis wird jedes Mal ausgelöst, wenn sich der value des Elements ändert. Dies unterscheidet sich vom change-Ereignis, das nur ausgelöst wird, wenn der Wert bestätigt wird, z.B. durch Drücken der Eingabetaste oder Auswählen eines Wertes aus einer Liste von Optionen. Beachten Sie, dass das input-Ereignis nicht ausgelöst wird, wenn JavaScript programmgesteuert den value eines Elements ändert.

Syntax

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

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

oninput = (event) => { }

Ereignistyp

Ein InputEvent. Erbt von UIEvent.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von ihren Eltern, UIEvent und Event.

InputEvent.data Schreibgeschützt: Gibt eine Zeichenkette mit den eingefügten Zeichen zurück. Dies kann eine leere Zeichenkette sein, wenn die Änderung keinen Text einfügt (zum Beispiel beim Löschen von Zeichen).
InputEvent.dataTransfer Schreibgeschützt: Gibt ein DataTransfer-Objekt zurück, das Informationen über Richtext- oder Klartextdaten enthält, die zum bearbeitbaren Inhalt hinzugefügt oder daraus entfernt werden.
InputEvent.inputType Schreibgeschützt: Gibt den Typ der Änderung für bearbeitbaren Inhalt zurück, wie beispielsweise das Einfügen, Löschen oder Formatieren von Text.
InputEvent.isComposing Schreibgeschützt: Gibt einen Boolean zurück, der anzeigt, ob das Ereignis nach compositionstart und vor compositionend ausgelöst wird.

Beispiele

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

HTML

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

Specification
UI Events # event-type-input
HTML # handler-oninput

Browser-Kompatibilität

Siehe auch

Verwandte Ereignisse