Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
15
12
9
5
18
5

CompositionEvent() コンストラクターは、新しい CompositionEvent オブジェクトのインスタンスを作成します。

26
12
53
7
26
7

data は CompositionEvent インターフェイスの読み取り専用プロパティで、 このプロパティは、イベントを発生させた入力システムによって生成された文字を返します。その正確な性質は、 CompositionEvent オブジェクトを生成したイベントの種類によって異なります。

15
12
9
5
18
5

compositionend イベントは、 input method editor などのテキスト編集システムが現在の編集セッションを完了またはキャンセルした時に発生します。

15
12
9
5
18
5

compositionstart イベントは、 input method editor などのテキスト変換システムが新しい変換セッションを開始した時に発生します。

15
12
9
5
18
5

compositionupdate イベントは、 input method editor などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。

18
12
9
5
18
5
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

実務での使いどころ

  • Composition events の活用

    DOM の CompositionEvent は、ユーザーの間接的なテキストの入力(訳注: かな漢字変換の入力など)によって発生するイベントを表します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。