EditContext: compositionstart 事件

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

当使用输入法编辑器 (IME) 窗口进行组合输入开始时，会触发 EditContext 接口的 compositionstart 事件。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

addEventListener("compositionstart", (event) => { })

oncompositionstart = (event) => { }

示例

使用 `compositionstart` 更改可编辑区域的边框

在下面的示例中，当 compositionstart 事件触发时，可编辑区域的边框会设置为红色；当 compositionend 事件触发时，边框会恢复为黑色。请注意，此示例中的事件监听器回调仅在使用 IME 窗口或其他平台特定的编辑 UI 表面进行文本组合时才会调用。

css

#text-editor {
  border: 1px solid black;
}
#text-editor.is-composing {
  border-color: red;
}

html

<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");
});