このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Element: compositionupdate イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
compositionupdate イベントは、IME などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。
例えば、このイベントは、ユーザーがピン音 IME を使用して漢字の入力をしている最中に発生します。
構文
このイベント名をaddEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("compositionupdate", (event) => {});oncompositionupdate = (event) => {};イベント型
CompositionEvent です。Event を継承しています。
イベントプロパティ
親であるUIEvent およびEvent から継承したプロパティもあります。
CompositionEvent.data読取専用イベントを発生させたインプットメソッドによって生成された文字を返します。これは
CompositionEventオブジェクトを生成したイベントの種類によって異なります。CompositionEvent.locale読取専用非推奨;現在の入力メソッドのロケール（例えば、変換が IME に関連付けられている場合はキーボードレイアウトのロケール）を返します。
例
js
const inputElement = document.querySelector('input[type="text"]');inputElement.addEventListener("compositionupdate", (event) => { console.log(`generated characters were: ${event.data}`);});実行例
HTML
html
<div> <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" name="example" /></div><div> <label for="eventLog">イベントログ:</label> <textarea readonly rows="8" cols="25" ></textarea> <button>Clear</button></div>body { padding: 0.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: 0.5rem 0;}kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black;}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-compositionupdate |
ブラウザーの互換性
関連情報
- 関連イベント:
compositionstart,compositionend。