EditContext: compositionstart Ereignis
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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
| Specification |
|---|
| EditContext API # dom-editcontext-oncompositionstart |