Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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.
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
const inputElement = document.querySelector('input[type="text"]');
inputElement.addEventListener("compositionstart", (event) => {
console.log(`generated characters were: ${event.data}`);
});
Exemple concret
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>
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);
Résultat
Spécifications
| Spécification |
|---|
| UI Events # event-type-compositionstart |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
- Événements liés :
compositionend,compositionupdate.
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.