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()">

Versuchen Sie es selbst

Beispiel 2

Bereichsschieber - Wie man den Schiebervalue dynamisch aktualisiert:

<input type="range" oninput="myFunction(this.value)">

Versuchen Sie es selbst

Syntax

In HTML:

<element oninput="myScript">

Versuchen Sie es selbst

In JavaScript:

object.oninput = function(){myScript};

Versuchen Sie es selbst

In JavaScript wird die Methode addEventListener() verwendet:

object.addEventListener("input", myScript);

Versuchen Sie es selbst

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