compositionstart
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
BCD tables only load in the browser
Voir aussi
- Événements liés :
compositionend
,compositionupdate
.