Element : évènement compositionstart

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 compositionstart est déclenché lorsqu'un système de composition de texte tel qu'une méthode de saisie démarre une nouvelle session de composition.

Par exemple, cet évènement peut être déclenché lorsqu'un·e utilisateur·ice commence à saisir 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("compositionstart", (event) => { })

oncompositionstart = (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-compositionstart

Compatibilité des navigateurs

Voir aussi

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

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