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 Januar 2020.
Das input-Ereignis wird ausgelöst, wenn der value 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 aktiviertem contenteditable und für jedes Element, wenn designMode aktiviert ist. Im Fall von contenteditable und designMode ist das Ereignisziel der Bearbeitungs-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 mit type=checkbox oder type=radio sollte das input-Ereignis immer dann ausgelöst werden, wenn ein Benutzer das Kontrollelement 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 akzeptieren (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 unterscheidet sich vom change-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 das input-Ereignis nicht ausgelöst wird, wenn JavaScript den value eines Elements programmatisch ändert.
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.
Ereigniseigenschaften
Diese Schnittstelle erbt Eigenschaften von ihren Eltern, UIEvent und Event.
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 ein
DataTransfer-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 einen
Boolean-Wert zurück, der angibt, ob das Ereignis nachcompositionstartund vorcompositionendausgelö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 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
Loading…
Siehe auch
- Verwandte Ereignisse