Web/API/CompositionEvent

The DOM CompositionEvent represents events that occur due to the user indirectly entering text.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25  86,20  86,30  76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/UIEvent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="153.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">UIEvent</text></a><polyline points="191,25  201,20  201,30  191,25" stroke="#D4DDE4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent" target="_top"><rect x="231" y="1" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="311" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">CompositionEvent</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Constructor

CompositionEvent(): Creates a new CompositionEvent object instance.

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 ': Returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with IME).

Methods

This interface also inherits methods of its parent, UIEvent, and its ancestor — Event.

CompositionEvent.initCompositionEvent() ': Initializes the attributes of a CompositionEvent object.

Specifications

Specification	Status	Comment
UI EventsThe definition of 'CompositionEvent' in that specification.	Working Draft
Document Object Model (DOM) Level 3 Events SpecificationThe definition of 'CompositionEvent' in that specification.	Obsolete

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`CompositionEvent`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 9	IE Full support Yes	Opera No support No	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 9	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`CompositionEvent()` constructor	Chrome Full support Yes	Edge Full support 12	Firefox Full support 53	IE Full support Yes	Opera No support No	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 53	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support Yes
`data`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 9	IE Full support Yes	Opera No support No	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 9	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`initCompositionEvent` Deprecated'Non-standard'	Chrome Full support Yes	Edge Full support 12	Firefox Full support 9	IE Full support Yes	Opera No support No	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 9	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support Yes
`locale` Deprecated'Non-standard'	Chrome Full support Yes	Edge Full support 12	Firefox Full support 9	IE Full support Yes	Opera No support No	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 9	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support Yes

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Non-standard. Expect poor cross-browser support.': Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.': Deprecated. Not for use in new websites.