Element: compositionstart 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 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 Input method editor.
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 UIEvent and Event.
Event properties
This interface also inherits properties of its parent, UIEvent, and its ancestor — Event.
CompositionEvent.dataRead only-
Returns 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 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
<div class="control">
<label for="example">
Focus the text-input control, then open your IME and begin typing.
</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
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
Loading...
See also
- Related events:
compositionend,compositionupdate.