Element: compositionend event

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.


Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener('compositionend', (event) => {});

oncompositionend = (event) => { };

Event type

Event properties

This interface also inherits properties of its parent, UIEvent, and its ancestor — Event.

CompositionEvent.data Read only

Returns the characters generated by the input method that raised the event; its varies depending on the type of event that generated the CompositionEvent object.

CompositionEvent.locale Read only Deprecated

Returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with IME).


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

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

Live example


<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 class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="25" id="eventLog"></textarea>
  <button class="clear-log">Clear</button>


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);



UI Events
# event-type-compositionend

Browser compatibility

BCD tables only load in the browser

See also