EditContext: compositionstart event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
Thecompositionstart event of theEditContext interface fires when composition using anInput Method Editor (IME) window starts.
Syntax
Use the event name in methods likeaddEventListener(), or set an event handler property.
addEventListener("compositionstart", (event) => { })oncompositionstart = (event) => { }Examples
Usingcompositionstart to change the editable region's border
In the following example, the editable region's border is set to red when thecompositionstart event fires, and back to black when thecompositionend event fires. Note that the event listener callbacks in this example are only called when using an IME window, or other platform-specific editing UI surfaces, to compose text.
#text-editor { border: 1px solid black;}#text-editor.is-composing { border-color: red;}<div></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");});Specifications
| Specification |
|---|
| EditContext API # dom-editcontext-oncompositionstart |