Element : évènement input

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

addEventListener("input", (event) => { })

oninput = (event) => { }

Type d'évènement

Un objet InputEvent. Hérite de UIEvent.

Description

Pour les éléments <input> avec type=checkbox ou type=radio, l'évènement input doit se déclencher chaque fois qu'un·e utilisateur·ice bascule le contrôle, conformément à la spécification du standard vivant HTML ^(angl.). Cependant, historiquement, ce n'a pas toujours été le cas. Vérifiez la compatibilité, ou utilisez plutôt l'évènement change pour les éléments de ces types.

Pour les éléments HTML <textarea> et <input> qui acceptent une saisie de texte (type=text, type=tel, etc.), l'interface est InputEvent ; pour les autres, l'interface est Event.

L'évènement input se déclenche chaque fois que la value de l'élément change. Cela diffère de l'évènement change, qui ne se déclenche que lorsque la valeur est validée, par exemple en appuyant sur la touche Entrée ou en sélectionnant une valeur dans une liste d'options. Notez que l'évènement input ne se déclenche pas lorsque JavaScript modifie la valeur (value) d'un élément de manière programmatique.

En général, seuls les changements de valeur initiés par l'utilisateur·ice, y compris le remplissage automatique, sont censés déclencher l'évènement input. Certains changements de la valeur d'un contrôle ne déclenchent pas du tout l'évènement input, par exemple :

• Définir la valeur de manière programmatique, par exemple en assignant à la value d'un élément ou au selectedIndex d'un élément <select>.
• Modifier les éléments enfants d'un contrôle d'une manière qui change sa valeur, par exemple en supprimant l'élément <option> sélectionné d'un élément <select>.
• Modifier les attributs d'un contrôle d'une manière qui amène le navigateur à ajuster sa valeur, par exemple en modifiant le min ou le max d'un champ de type plage (range) de sorte que sa valeur actuelle se situe en dehors des nouvelles limites.
• Réinitialiser un formulaire, ce qui ne déclenche qu'un évènement reset.
• Le navigateur restaure les valeurs de formulaire enregistrées lors de la navigation dans l'historique. Les contrôles dont les valeurs sont restaurées peuvent varier selon les navigateurs.
• Chrome efface le nom d'utilisateur·ice et le mot de passe non modifiés et remplis automatiquement si les informations d'identification ne sont plus disponibles, par exemple lorsque l'utilisateur·ice s'est déconnecté·e de Chrome après le remplissage automatique.

Exemples

Cet exemple enregistre la valeur chaque fois que vous modifiez la valeur de l'élément HTML <input>.

HTML

<input placeholder="Entrer du texte" name="nom" />
<p id="valeurs"></p>

JavaScript

const champ = document.querySelector("input");
const journal = document.getElementById("valeurs");

champ.addEventListener("input", updateValue);

function updateValue(e) {
  journal.textContent = e.target.value;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Évènements associés :
  • beforeinput
  • change
  • invalid