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 sich der value eines <input>, <select> oder <textarea> Elements direkt durch eine Benutzeraktion geändert hat (zum Beispiel durch Eingabe in ein Textfeld oder das Ankreuzen eines Kontrollkästchens).

Das Ereignis gilt auch für Elemente mit aktiviertem contenteditable und für jedes Element, wenn designMode eingeschaltet ist. Im Fall von contenteditable und designMode ist das Ziel des Ereignisses der Bearbeitungshost. Wenn diese Eigenschaften auf mehrere Elemente angewendet werden, ist der Bearbeitungshost das nächstgelegene Vorfahr-Elelemnt, dessen Elternteil nicht bearbeitbar ist.

Bei <input>-Elementen mit type=checkbox oder type=radio sollte das input-Ereignis jedes Mal 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 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 übernommen wird, z. B. durch Drücken der Eingabetaste oder Auswählen eines Wertes aus einer Optionsliste. 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 legen Sie eine Ereignishandler-Eigenschaft fest.

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 zu bearbeitbaren Inhalten hinzugefügt oder daraus entfernt werden.
InputEvent.inputType Schreibgeschützt: Gibt den Typ der Änderung für bearbeitbare Inhalte zurück, z. B. Einfügen, Löschen oder Formatieren von Text.
InputEvent.isComposing Schreibgeschützt: Gibt einen Boolean-Wert zurück, der angibt, ob das Ereignis nach compositionstart und vor compositionend ausgelöst wird.

Beispiele

Dieses Beispiel protokolliert den Wert jedes Mal, wenn 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