oninput-evenement

DOM events InputEvent

Definitie en gebruik

Het oninput-evenement treedt op wanneer het element gebruikersinput ontvangt.

Dit evenement treedt op wanneer de waarde van een <input> of <textarea>-element verandert.

Tip:Dit evenement lijkt op onchange event. Het verschil ligt in het feit dat het oninput-evenement onmiddellijk optreedt nadat de waarde van het element is veranderd, terwijl onchange optreedt wanneer het element de focus verliest en de inhoud is veranderd. Een andere verschil is dat het onchange-evenement ook van toepassing is op <select>-elementen.

Voorbeeld

Voorbeeld 1

Voer JavaScript uit wanneer de gebruiker inhoud invoert in een <input>-veld:

<input type="text" oninput="myFunction()">

Probeer het zelf uit

Voorbeeld 2

Bereik schuifbalk - hoe de waarde van de schuifbalk dynamisch bij te werken:

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

Probeer het zelf uit

Syntax

In HTML:

<element oninput="myScript">

Probeer het zelf uit

In JavaScript:

object.oninput = function(){myScript};

Probeer het zelf uit

In JavaScript, gebruik de addEventListener() methode:

object.addEventListener("input", myScript);

Probeer het zelf uit

Opmerking:Internet Explorer 8 of eerder wordt niet ondersteund addEventListener() methode.

Technische details

Bubbelend: Support
Annuleerbaar: Niet ondersteund
Evenement type: Event, InputEvent
Ondersteunde 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"> en <textarea>
DOM versie: Level 3 Events

Browser support

The numbers in the table indicate the first browser version that fully supports the event.

Events Chrome IE Firefox Safari Opera
oninput Support 9.0 4.0 5.0 Support
DOM events InputEvent