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.

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-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 30 juil. 2026 par les contributeur·ice·s du MDN.

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