Element: input event

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.

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

oninput = (event) => {};

<input placeholder="Enter some text" name="name" />
<p id="values"></p>

const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("input", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}