oninput-Ereignis
Definition und Verwendung
Das oninput-Ereignis tritt auf, wenn ein Element Benutzereingaben erhält.
Dieses Ereignis tritt auf, wenn der Wert eines <input> oder <textarea>-Elements geändert wird.
Hinweis:Dieses Ereignis ähnelt onchange-Ereignis. Der Unterschied liegt darin, dass das oninput-Ereignis sofort nach der Änderung des Elementwerts ausgelöst wird, während das onchange-Ereignis erst ausgelöst wird, wenn das Element den Fokus verliert und der Inhalt geändert wurde. Ein weiterer Unterschied ist, dass das onchange-Ereignis auch für <select>-Elemente gilt.
Beispiel
Beispiel 1
Wenn der Benutzer Inhalt in ein <input>-Feld eingibt, wird JavaScript ausgeführt:
<input type="text" oninput="myFunction()">
Beispiel 2
Bereichsschieber - Wie man den Schiebervalue dynamisch aktualisiert:
<input type="range" oninput="myFunction(this.value)">
Syntax
In HTML:
<element oninput="myScript">
In JavaScript:
object.oninput = function(){myScript};
In JavaScript wird die Methode addEventListener() verwendet:
object.addEventListener("input", myScript);
Anmerkung:Internet Explorer 8 oder frühere Versionen unterstützen dies nicht addEventListener() Methode.
Technische Details
Blasen: | Unterstützung |
---|---|
Kann abgebrochen werden: | Nicht unterstützt |
Event-Typ: | Event, InputEvent |
Unterstützte HTML-Tags: | <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type="number">, <input type="password">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week"> sowie <textarea> |
DOM Version: | Level 3 Ereignisse |
Browser-Unterstützung
Die Zahlen in der Tabelle zeigen die erste Browser-Version an, die das Ereignis vollständig unterstützt.
Ereignisse | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
oninput | Unterstützung | 9.0 | 4.0 | 5.0 | Unterstützung |