Javascript input – beim Ändern von input- und textarea-Feldern

input vs change

Das input-Event 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.

<input type="number" id="mynum">
<output for="mynum"></output>

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;
});

Weitere Events der Formulare