W3cubDocs

/Web APIs

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

Syntax

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

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

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

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="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-compositionupdate>

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
`compositionupdate_event`	18	12	9	15	5	18	9	14	5	1.0	4.4	5