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 an experimental technology
Check the Browser compatibility table carefully before using this in production.
Sự kiện compositionstart của giao diện EditContext được kích hoạt khi bắt đầu soạn thảo bằng cửa sổ Input Method Editor (IME).
Cú pháp
Dùng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.
addEventListener("compositionstart", (event) => { })
oncompositionstart = (event) => { }
Ví dụ
Dùng compositionstart để thay đổi viền của vùng có thể chỉnh sửa
Trong ví dụ sau, viền của vùng có thể chỉnh sửa được đặt thành màu đỏ khi sự kiện compositionstart được kích hoạt, và trở lại màu đen khi sự kiện compositionend được kích hoạt. Lưu ý rằng các callback trong ví dụ này chỉ được gọi khi dùng cửa sổ IME hoặc các giao diện người dùng chỉnh sửa khác của nền tảng để soạn thảo văn bản.
#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");
});
Thông số kỹ thuật
| Specification |
|---|
| EditContext API # dom-editcontext-oncompositionstart |