Javascript input-Event – Ändern von Eingabefeldern

Javascript oninput

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

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

oninput vs onchange

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.

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