Element: compositionend イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

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

例えば、このイベントは、ユーザーが ピン音 IME を使用して漢字の入力を完了した後に発生します。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("compositionend", (event) => {});

oncompositionend = (event) => {};

イベント型

CompositionEvent です。 Event を継承しています。

Event UIEvent CompositionEvent

イベントプロパティ

親である UIEvent および Event から継承したプロパティもあります。

CompositionEvent.data 読取専用

イベントを発生させたインプットメソッドによって生成された文字を返します。これは CompositionEvent オブジェクトを生成したイベントの種類によって異なります。

CompositionEvent.locale 読取専用

現在の入力メソッドのロケール（例えば、変換が IME に関連付けられている場合はキーボードレイアウトのロケール）を返します。

例

js
const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("compositionend", (event) => {
  console.log(`生成された文字: ${event.data}`);
});

実行例

HTML

html
<div class="control">
  <label for="example">
    最初にボックスを選択して、IME を開いてください。
    <ul>
      <li>macOS では <kbd>option</kbd> + <kbd>`</kbd></li>
      <li>Windows では <kbd>windows</kbd> + <kbd>.</kbd></li>
    </ul>
  </label>
  <input type="text" id="example" name="example" />
</div>

<div class="event-log">
  <label for="eventLog">イベントログ:</label>
  <textarea
    readonly
    class="event-log-contents"
    rows="8"
    cols="25"
    id="eventLog"></textarea>
  <button class="clear-log">Clear</button>
</div>

JS

js
const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");
const clearLog = document.querySelector(".clear-log");

clearLog.addEventListener("click", () => {
  log.textContent = "";
});

function handleEvent(event) {
  log.textContent += `${event.type}: ${event.data}\n`;
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);

結果

仕様書

Specification
UI Events
# event-type-compositionend

ブラウザーの互換性

BCD tables only load in the browser

関連情報