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 April 2017.
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 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-compositionupdate |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連イベント:
compositionstart
,compositionend
。