Composition eventsBaseline · Widely available
The compositionstart, compositionupdate, and compositionend events fire when an input method editor adds characters that might not be commonly available on keyboards. Examples of these characters are emoji, logograms in Asian languages, or input from speech recognition processors.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Apr 19, 2017. Widely available since Oct 19, 2019.
Browser support
DesktopChrome
1–25Not supported
26+Supportedsince Mar 26, 2013
Current: 155Edge
12+Supportedsince Jul 29, 2015
Current: 154Firefox
1–52Not supported
53+Supportedsince Apr 19, 2017
Current: 157Safari
1–6Not supported
7+Supportedsince Oct 22, 2013
Current: 27MobileChrome Android
18–25Not supported
26+Supportedsince Apr 3, 2013
Current: 155Firefox Android
4–52Not supported
53+Supportedsince Apr 19, 2017
Current: 157Safari iOS
1–6Not supported
7+Supportedsince Sep 18, 2013
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: CompositionEvent.
Feature detection
JS · check before using
if ("CompositionEvent" in globalThis) {
// CompositionEvent is available
} else {
// load a polyfill or use a fallback
}Sub-features
Support for each part of the feature (6). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| CompositionEvent | 15 | 12 | 9 | 5 | 18 | 9 | 5 |
| CompositionEvent.CompositionEvent | 26 | 12 | 53 | 7 | 26 | 53 | 7 |
| CompositionEvent.data | 15 | 12 | 9 | 5 | 18 | 9 | 5 |
| Element.compositionend_event | 15 | 12 | 9 | 5 | 18 | 9 | 5 |
| Element.compositionstart_event | 15 | 12 | 9 | 5 | 18 | 9 | 5 |
| Element.compositionupdate_event | 18 | 12 | 9 | 5 | 18 | 9 | 5 |