compositionstart

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

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 pourrait être déclenché après qu'un utilisateur a commencé à saisir un caractère chinois en utilisant un Pinyin IME.

Propagation Oui
Annulable Oui
Interface CompositionEvent
Propriété du gestionnaire d'événements Aucune

Exemples

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

inputElement.addEventListener("compositionstart", (event) => {
  console.log(`generated characters were: ${event.data}`);
});

Exemple concret

HTML

html
<div class="control">
  <label for="name"
    >Sur macOS, cliquez dans la zone de texte ci-dessous,<br />
    puis tapez <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd> :</label
  >
  <input type="text" id="example" name="example" />
</div>

<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
  <button class="clear-log">Clear</button>
</div>

JS

js
const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");
const clearLog = document.querySelector(".clear-log");

clearLog.addEventListener("click", () => {
  log.textContent = "";
});

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

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);

Résultat

Spécifications

Specification
UI Events
# event-type-compositionstart

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
compositionstart event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi