Element : évènement compositionupdate

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 juillet 2015.

En savoir plus
Voir la compatibilité complète

L'évènement compositionupdate est déclenché lorsqu'un nouveau caractère est reçu dans le cadre d'une session de composition de texte contrôlée par un système de composition de texte tel qu'une méthode de saisie.

Par exemple, cet évènement peut être déclenché lorsqu'un·e utilisateur·ice saisit un caractère chinois en utilisant une méthode de saisie Pinyin.

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

oncompositionupdate = (event) => { }

Type d'évènement

Un objet CompositionEvent. Hérite de UIEvent et de Event.

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

Cette interface hérite également des propriétés de son parent, UIEvent, et de son ancêtre — Event.

CompositionEvent.data Lecture seule: Retourne les caractères générés par la méthode de saisie qui a déclenché l'évènement ; cela varie en fonction du type d'évènement qui a généré l'objet CompositionEvent.
CompositionEvent.locale Lecture seule: Retourne la locale de la méthode de saisie actuelle (par exemple, la locale de la disposition du clavier si la composition est associée à une méthode de saisie).

Exemples

const elementSaisie = document.querySelector('input[type="text"]');

elementSaisie.addEventListener("compositionend", (event) => {
  console.log(`caractères générés : ${event.data}`);
});

Exemple interactif

HTML

html

<div class="controle">
  <p>
    Premièrement, sélectionnez la zone de texte, puis ouvrez la méthode de
    saisie&nbsp;:
  </p>
  <ul>
    <li>sur macOS, appuyez sur <kbd>option</kbd> + <kbd>`</kbd></li>
    <li>sur Windows, appuyez sur <kbd>windows</kbd> + <kbd>.</kbd></li>
  </ul>
  <label for="exemple">Exemple de saisie</label>
  <input type="text" id="exemple" name="exemple" />
</div>

<div class="journal-event">
  <label for="journalEvent">Journal évènement&nbsp;:</label>
  <textarea
    readonly
    class="contenu-journal-event"
    rows="8"
    cols="25"
    id="journalEvent"></textarea>
  <button class="effacer-journal">Effacer</button>
</div>

body {
  padding: 0.2rem;
  display: grid;
  grid-template-areas: "control log";
}

.controle {
  grid-area: control;
}

.journal-event {
  grid-area: log;
}

.contenu-journal-event {
  resize: none;
}

label,
button {
  display: block;
}

input[type="text"] {
  margin: 0.5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

JavaScript

const elementSaisie = document.querySelector('input[type="text"]');
const journal = document.querySelector(".contenu-journal-event");
const effacerJournal = document.querySelector(".effacer-journal");

effacerJournal.addEventListener("click", () => {
  journal.textContent = "";
});

function gestionEvenement(event) {
  journal.textContent += `${event.type}: ${event.data}\n`;
}

elementSaisie.addEventListener("compositionstart", gestionEvenement);
elementSaisie.addEventListener("compositionupdate", gestionEvenement);
elementSaisie.addEventListener("compositionend", gestionEvenement);

Résultat

Spécifications

Spécification
UI Events # event-type-compositionupdate

Compatibilité des navigateurs

Voir aussi

Évènements associés : compositionstart, compositionend.

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 30 juil. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu