W3cubDocs

/Web APIs

Element: compositionend event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

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 Input method editor.

Syntax

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

addEventListener("compositionend", (event) => { })

oncompositionend = (event) => { }

Event type

A CompositionEvent. Inherits from UIEvent and Event.

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 the current input method (for example, the keyboard layout locale if the composition is associated with an Input method editor).

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

JavaScript

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

Result

Specifications

Specification
UI Events> # event-type-compositionend>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`compositionend_event`	15	12	9	≤15	5	18	9	≤14	5	1.0	4.4	5