Element : évènement beforeinput

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("beforeinput", (event) => { })

onbeforeinput = (event) => { }

Type d'évènement

Un objet InputEvent. Hérite de UIEvent.

Propriétés de l'évènement

Cette interface hérite des propriétés de ses parents, UIEvent et Event.

InputEvent.data Lecture seule

Retourne une chaînes de caractères contenant les caractères insérés. Il peut s'agir d'une chaîne de caractères vide si la modification n'insère pas de texte (par exemple, lors de la suppression de caractères).

InputEvent.dataTransfer Lecture seule

Retourne un objet DataTransfer contenant des informations sur les données en texte enrichi ou en texte brut ajoutées ou supprimées du contenu modifiable.

InputEvent.inputType Lecture seule

Retourne le type de modification apportée au contenu modifiable, comme par exemple l'insertion, la suppression ou la mise en forme de texte.

InputEvent.isComposing Lecture seule

Retourne une valeur Boolean indiquant si l'évènement est déclenché après compositionstart et avant compositionend.

Exemples

Détecter de fonctionnalité

La fonction suivante retourne vrai si beforeinput et getTargetRanges, sont pris en charge.

function isBeforeInputEventAvailable() {
  return (
    window.InputEvent &&
    typeof InputEvent.prototype.getTargetRanges === "function"
  );
}

Journalisation simple

Cet exemple enregistre la valeur actuelle de l'élément, juste avant de remplacer cette valeur par la nouvelle valeur appliquée à l'élément HTML <input>.

HTML

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

JavaScript

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

entree.addEventListener("beforeinput", actualiserValeur);

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

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Évènement associé : input