EditContext: compositionstart Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das compositionstart-Ereignis des EditContext-Interfaces wird ausgelöst, wenn die Komposition mit einem Input Method Editor (IME)-Fenster beginnt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("compositionstart", (event) => { })
oncompositionstart = (event) => { }
Beispiele
Verwendung von compositionstart, um den Rahmen des editierbaren Bereichs zu ändern
Im folgenden Beispiel wird der Rahmen des editierbaren Bereichs auf Rot gesetzt, wenn das compositionstart-Ereignis ausgelöst wird, und zurück auf Schwarz, wenn das compositionend-Ereignis ausgelöst wird. Beachten Sie, dass die Event-Listener-Callbacks in diesem Beispiel nur aufgerufen werden, wenn ein IME-Fenster oder andere plattformspezifische Bearbeitungsoberflächen zur Textkomposition verwendet werden.
#text-editor {
border: 1px solid black;
}
#text-editor.is-composing {
border-color: red;
}
<div id="text-editor"></div>
const editorElement = document.getElementById("text-editor");
const editContext = new EditContext();
editorElement.editContext = editContext;
editContext.addEventListener("compositionstart", (event) => {
editorElement.classList.add("is-composing");
});
editContext.addEventListener("compositionend", (event) => {
editorElement.classList.remove("is-composing");
});
Spezifikationen
| Spezifikation |
|---|
| EditContext API # dom-editcontext-oncompositionstart |