compositionupdate
イベントは、 IME などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。
例えば、このイベントは、ユーザーがピン音 IME を使用して漢字の入力をしている最中に発生します。
バブリング | あり |
---|---|
キャンセル | 可 |
インターフェイス | CompositionEvent |
イベントハンドラープロパティ | なし |
例
const inputElement = document.querySelector('input[type="text"]');
inputElement.addEventListener('compositionupdate', (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);
結果
仕様書
仕様書 | 状態 |
---|---|
UI Events | 草案 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- 関連イベント:
compositionstart
,compositionend
。