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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
compositionstart event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報