Element: compositionend event

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

The compositionend event is fired when a text composition system such as an input method editor completes or cancels the current composition session.

For example, this event could be fired after a user finishes entering a Chinese character using a Pinyin IME.

Bubbles Yes
Cancelable Yes
Interface CompositionEvent
Event handler property None

Examples

const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener('compositionend', (event) => {
  console.log(`generated characters were: ${event.data}`);
});

Live example

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>

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 Status
UI Events Working Draft

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
compositionend eventChrome Full support YesEdge Full support YesFirefox Full support 9IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also