Element : évènement input

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

En savoir plus
Voir la compatibilité complète

L'évènement input se déclenche lorsque la value d'un élément HTML <input>, <select> ou <textarea> a été modifiée directement par une action de l'utilisateur·ice (comme taper dans une zone de texte ou cocher une case).

L'évènement s'applique également aux éléments avec contenteditable activé, et à tout élément lorsque designMode est activé. Dans le cas de contenteditable et designMode, la cible de l'évènement est l'hôte d'édition. Si ces propriétés s'appliquent à plusieurs éléments, le hôte d'édition est l'ancêtre le plus proche dont le parent n'est pas éditable.

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.

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) => { }

<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;
}