HTMLElement: beforeinput event
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2021.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
L'évènement DOM beforeinput est émis quand la valeur d'un élément <input>, <select>, ou <textarea> est sur le point d'être modifié. L'évènement s'applique également aux éléments ayant l'attribut contenteditable actif, et à tout élément quand le 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, l'hôte d'édition est le plus proche ancêtre dont le parent n'est pas éditable.
| Bouillonne | Oui |
|---|---|
| Annulable | Oui |
| Interface | InputEvent |
| Propriété gestionnaire d'évènement | Aucune |
| Sync / Async | Sync |
| Composé | Oui |
| Action par défaut | Mettre à jour l'élément DOM |
Exemples
Cet exemple affiche la valeur de l'élément <input> juste avant qu'elle soit modifiée.
HTML
<input placeholder="Saisissez du texte" name="name" />
<p id="values"></p>
JavaScript
const input = document.querySelector("input");
const log = document.getElementById("values");
input.addEventListener("beforeinput", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
Résultat
Spécifications
| Specification |
|---|
| UI Events # event-type-beforeinput |
Compatibilité des navigateurs
Voir aussi
- Évènement associé :
input