compositionstart

Baseline Widely available

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.

L'événementcompositionstart est déclenché lorsqu'un système de composition de texte tel qu'unemé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 unPinyin IME.

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

Exemples

const inputElement = document.querySelector('input[type="text"]');inputElement.addEventListener("compositionstart", (event) => {  console.log(`generated characters were: ${event.data}`);});

Exemple concret

HTML

html

<div>  <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" name="example" /></div><div>  <label>Event log:</label>  <textarea readonly rows="8" cols="25"></textarea>  <button>Clear</button></div>

body {  padding: 0.2rem;  display: grid;  grid-template-areas: "control log";}.control {  grid-area: control;}.event-log {  grid-area: log;}.event-log-contents {  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;}

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);