Element: compositionstart イベント

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.

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

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

構文

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

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

oncompositionstart = (event) => {};

イベント型

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

Event UIEvent CompositionEvent

イベントプロパティ

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

CompositionEvent.data 読取専用

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

CompositionEvent.locale 読取専用

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

例

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

inputElement.addEventListener("compositionstart", (event) => {
  console.log(`generated characters were: ${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>

JavaScript

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-compositionstart

ブラウザーの互換性

BCD tables only load in the browser

関連情報