Element: compositionupdate event
The compositionupdate
event is fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor.
For example, this event could be fired while a user enters a Chinese character using a Pinyin IME.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | CompositionEvent |
Event handler property | None |
Examples
const inputElement = document.querySelector('input[type="text"]');
inputElement.addEventListener('compositionupdate', (event) => {
console.log(`generated characters were: ${event.data}`);
});
Live example
HTML
<div class="control">
<label for="name">First select textbox, then to open IME:<ul><li>on macOS type <kbd>option</kbd> + <kbd>`</kbd></li><li>on Windows type <kbd>windows</kbd> + <kbd>.</kbd></li></ul></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>
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);
Result
Specifications
Specification |
---|
UI Events # event-type-compositionupdate |
Browser compatibility
BCD tables only load in the browser
See also
- Related events:
compositionstart
,compositionend
.