--- title: 'Element: compositionend イベント' slug: Web/API/Element/compositionend_event tags: - Event - Reference translation_of: Web/API/Element/compositionend_event ---

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

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

バブリング	あり
キャンセル	可
インターフェイス	{{domxref("CompositionEvent")}}
イベントハンドラープロパティ	なし

例

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

inputElement.addEventListener('compositionend', (event) => {
  console.log(`generated characters were: ${event.data}`);
});

実行例

HTML

<div class="control">
  <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label>
  <input type="text" id="example" name="example">
</div>

<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
  <button class="clear-log">Clear</button>
</div>

CSS

body {
  padding: .2rem;
  display: grid;
  grid-template-areas: "control  log";
}

.control {
  grid-area: control;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label, button {
  display: block;
}

input[type="text"] {
  margin: .5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

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 = log.textContent + `${event.type}: ${event.data}\n`;
}

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

結果

仕様書

仕様書	状態
{{SpecName('UI Events', '#event-type-compositionend')}}	{{Spec2('UI Events')}}

例

実行例

HTML

CSS

JS

結果

仕様書

ブラウザーの互換性

関連情報