W3cubDocs

/Web APIs

Element: compositionstart event

The compositionstart event is fired when a text composition system such as an input method editor starts a new composition session.

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

Syntax

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

addEventListener("compositionstart", (event) => {});

oncompositionstart = (event) => {};

Event type

A CompositionEvent. Inherits from 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("compositionstart", (event) => {
  console.log(`generated characters were: ${event.data}`);
});

Live example

HTML

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-compositionstart

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`compositionstart_event`	15	12	9	11	≤15	5	≤37	18	9	≤14	5	1.0