Événement oninput
Définition et utilisation
L'événement oninput se produit lorsque l'élément reçoit l'entrée de l'utilisateur.
Cet événement se produit lorsque la valeur de l'élément <input> ou <textarea> change.
Astuce :Cet événement est similaire à Événement onchange. La différence réside dans le fait que l'événement oninput se produit immédiatement après que la valeur de l'élément ait changé, tandis que onchange se produit lorsque l'élément perd le focus et que le contenu a changé. Une autre différence est que l'événement onchange est également applicable aux éléments <select>.
Exemple
Exemple 1
Lorsque l'utilisateur écrit dans le champ <input>, exécutez JavaScript :
<input type="text" oninput="myFunction()">
Exemple 2
Glissière de gamme - Comment mettre à jour dynamiquement la valeur du curseur :
<input type="range" oninput="myFunction(this.value)">
Syntaxe
Dans HTML :
<element oninput="myScript">
En JavaScript :
object.oninput = function(){myScript};
En JavaScript, utilisez la méthode addEventListener() :
object.addEventListener("input", myScript);
Remarque :Internet Explorer 8 ou versions antérieures ne prennent pas en charge Méthode addEventListener().
Détails techniques
| Bubbling : | Support |
|---|---|
| Annulable : | Non pris en charge |
| Type d'événement : | Event, InputEvent |
| Balises HTML prises en charge : | <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"> ainsi que <textarea> |
| Version du DOM : | Événements de niveau 3 |
Support du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge complètement cet événement.
| Événements | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| oninput | Support | 9.0 | 4.0 | 5.0 | Support |
