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.

Syntax
------

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


```js
addEventListener("compositionend", (event) => {});

oncompositionend = (event) => {};
```

Event type
----------

A `CompositionEvent`. Inherits from `UIEvent` and `Event`.

Event

UIEvent

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


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

inputElement.addEventListener("compositionend", (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>
```


```
body {
  padding: 0.2rem;
  display: grid;
  grid-template-areas: "control log";
}

.control {
  grid-area: control;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

input[type="text"] {
  margin: 0.5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```


#### JavaScript


```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 += `${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
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related events: `compositionstart`, `compositionupdate`.