compositionstart
イベントは、IME などのテキスト編集システムが新しい編集セッションを開始した時に発生します。
例えば、このイベントは、ユーザーが Pinyin IME を使用して漢字の入力を開始した後に発生します。
バブリング | あり |
---|---|
キャンセル | 可 |
インターフェイス | CompositionEvent |
イベントハンドラープロパティ | なし |
例
const inputElement = document.querySelector('input[type="text"]'); inputElement.addEventListener('compositionstart', (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 | 草案 |
ブラウザー実装状況
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
compositionstart event | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 9 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 実装状況不明
- 実装状況不明
関連情報
- 関連イベント:
compositionend
,compositionupdate
。