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 wird ausgelöst, wenn der value
eines <input>
, <select>
oder <textarea>
Elements als direkte Folge einer Benutzeraktion geändert wurde (wie das Tippen in ein Textfeld oder das Aktivieren eines Kontrollkästchens).
Das Ereignis gilt auch für Elemente mit aktiviertem contenteditable
und für jedes Element, wenn designMode
eingeschaltet ist. Im Falle von contenteditable
und designMode
ist das Ereignisziel der Editing Host. Wenn sich diese Eigenschaften auf mehrere Elemente anwenden, ist der Editing Host das nächste übergeordnete Element, dessen Eltern nicht bearbeitbar sind.
Für <input>
Elemente mit type=checkbox
oder type=radio
sollte das input
Ereignis immer dann 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 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 festgeschrieben wird, beispielsweise durch Drücken der Eingabetaste oder durch 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 programmgesteuert ä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.data
Nur lesbar-
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.dataTransfer
Nur lesbar-
Gibt ein
DataTransfer
Objekt zurück, das Informationen über Richtext- oder Klartext-Daten enthält, die zu bearbeitbarem Inhalt hinzugefügt oder davon entfernt werden. InputEvent.inputType
Nur lesbar-
Gibt die Art der Änderung für bearbeitbare Inhalte zurück, wie zum Beispiel Einfügen, Löschen oder Formatieren von Text.
InputEvent.isComposing
Nur lesbar-
Gibt einen
Boolean
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 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 Standard # handler-oninput |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
-
Verwandte Ereignisse