EditContext: событие compositionstart

Событие compositionstart интерфейса EditContext срабатывает при начале ввода текста с помощью окна редактора ввода (IME).

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика событий.

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

oncompositionstart = (event) => {};

В следующем примере граница области редактирования устанавливается в красный цвет при срабатывании события compositionstart, и возвращается в чёрный при срабатывании события compositionend. Обратите внимание, что обратные вызовы обработчиков событий в этом примере вызываются только при использовании окна редактора ввода или других платформ, специфичных для редактирования интерфейсов, для составления текста.

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