Javascript Event input – beim Ändern von Eingabefeldern

Javascript oninput – wenn sich ein Eingabefeld ändert, noch vor dem Verlassen (blur) des Formularfelds

Das Event oninput ähnelt dem onchange-Event. onchange ist altgedient und zuverlässig, aber onchange ist auch behäbig und reagiert erst beim Verlassen des Eingabefelds (onblur). Bei Feldern vom Typ input type="range" merkt man das besonders deutlich: Der Wert wird erst geändert, wenn der Schieber losgelassen wird.

Darum gibt es einen neuen Event Listener names input, der von allen modernen Browsern unterstützt wird, IE 9 allerdings mit Einschränkungen (Probleme mit der Event-Erkennung beim Löschen von Zeichen).

oninput feuert direkt, wenn sich der Wert eines input- oder textarea-Elements ändert. Und noch ein Unterschied zu onchange: oninput löst auch auf select-Elementen aus und wenn der Benutzer den Inhalt eines contenteditable-Elements ändert.

Ein input-Event wird ausgelöst oder gefeuert, wenn sich der Wert eines <input>, <select> oder <textarea>-Elements ändert.

input-Event auf input type="number"

Mit HTML5 gibt neben dem klassischen input type="text" auch input type="number". Das Eingabefeld zeigt Pfeile, mit denen die Eingabe rauf- bzw. runterzählt. Beim Inkrement bzw. Dekrement feuert das Event oninput.

HTML
<input type="number" id="mynum">
<output for="mynum"></output>
Javascript
const mynum = document.getElementById('mynum');
const output = document.querySelector("output[for='mynum']");

mynum.oninput = function (eve) {
	output.value = this.value;
}

input-Event auf input type="range"

Mit onchange zeigt sich der Wert eines Range-Sliders erst, wenn der Slider losgelassen wurde. Das input-Event feuert während des Ziehens und gibt dem Benutzer eine bessere Kontrolle in die Hand.

<input type="range" name="range" id="range" min="-4" max="4">
<output for="range"></output>
		
const range = document.querySelector("#range");
const output = document.querySelector("output[for='slider']");
range.addEventListener ("input", function () {
	output.value = this.value;
});
Wähle input Wieviel Spicker Merk dir was input-Event