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.
Thecompositionupdate 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 aninput method editor.
For example, this event could be fired while a user enters a Chinese character using aPinyinInput method editor.
Syntax
Use the event name in methods likeaddEventListener(), or set an event handler property.
addEventListener("compositionupdate", (event) => { })oncompositionupdate = (event) => { }Event type
ACompositionEvent. Inherits fromUIEvent andEvent.
Event properties
This interface also inherits properties of its parent,UIEvent, and its ancestor —Event.
CompositionEvent.dataRead onlyReturns the characters generated by the input method that raised the event; its varies depending on the type of event that generated the
CompositionEventobject.CompositionEvent.localeRead onlyDeprecatedReturns 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> <p>First select textbox, then to open IME:</p> <ul> <li>on macOS type <kbd>option</kbd> + <kbd>`</kbd></li> <li>on Windows type <kbd>windows</kbd> + <kbd>.</kbd></li> </ul> <label for="example">Example input</label> <input type="text" name="example" /></div><div> <label for="eventLog">Event log:</label> <textarea readonly rows="8" cols="25" ></textarea> <button>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
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
See also
- Related events:
compositionstart,compositionend.