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.

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 1 août 2026 par les contributeur·ice·s du MDN.

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