EditContext: compositionstart イベント

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

EditContext インターフェイスの compositionstart イベントは、インプットメソッドエディター (IME) ウィンドウを用いた変換が開始する時発火します。

構文

addEventListener() などのメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。

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

仕様書

Specification
EditContext API
# dom-editcontext-oncompositionstart

ブラウザーの互換性

BCD tables only load in the browser