compositionstart

  • Revision slug: DOM/DOM_event_reference/compositionstart
  • Revision title: compositionstart
  • Revision id: 35121
  • Created:
  • Creator: ziyunfei
  • Is current revision? No
  • Comment 15 words added

Revision Content

The DOM compositionstart event is fired synchronously when indirect input of text begins, such as when the user starts using an IME to input text. It's represented by the {{ domxref("CompositionEvent") }} interface.

Note: This event should handle before starting the text composition system, but in Gecko it's the other way around; immediately after the system starts its composition system, Gecko fires this event.
  • Interface :{{ domxref('CompositionEvent') }}
  • Synchronicity :synchronous
  • Bubbles : yes
  • Target : {{ domxref('Element') }}
  • Cancelable : yes (but see browser-specific notes)
  • Default action : none

Specification

DOM Level3 Events

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support

{{ CompatVersionUnknown() }}

The data attribute value is wrong.

{{ CompatGeckoDesktop("9.0") }}

{{ CompatVersionUnknown() }}

The data value is always empty.

{{ CompatNo() }}

{{ CompatVersionUnknown() }}

The data attribute value is wrong.

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("9.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Gecko notes

According to the DOM Level3 specification, compositionstart is cancelable; however, Gecko doesn't currently let you cancel them.

Gecko fires this event when IME starts composition, and some platforms don't have an API for canceling composition once it's begun. In addition, Gecko can't know whether a keyboard event will start composition or not until IME actually starts composition. Because of this, {{ domxref("event.preventDefault()") }} doesn't work on compositionstart events in Gecko.

{{ languages( { "ja": "ja/DOM/DOM_event_reference/compositionstart","zh-cn": "zh-cn/DOM/DOM_event_reference/compositionstart" } ) }}

Revision Source

<p>The DOM <code>compositionstart</code> event is fired synchronously when indirect input of text begins, such as when the user starts using an IME to input text. It's represented by the {{ domxref("CompositionEvent") }} interface.</p>
<div class="note"><strong>Note:</strong> This event should handle before starting the text composition system, but in Gecko it's the other way around; immediately after the system starts its composition system, Gecko fires this event.</div>
<ul style="display:table;padding: 0;border-left: 2px solid;margin-left:0.5em;"> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Interface :</dfn>{{ domxref('CompositionEvent') }}</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Synchronicity :</dfn>synchronous</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Bubbles :</dfn> yes</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Target :</dfn> {{ domxref('Element') }}</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Cancelable :</dfn> yes (but see browser-specific notes)</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Default action :</dfn> none</li>
</ul>
<h2 id="Specification">Specification</h2>
<p><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-compositionstart" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-compositionstart">DOM Level3 Events</a></p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td> <p>{{ CompatVersionUnknown() }}</p> <p>The data attribute value is wrong.</p> </td> <td>{{ CompatGeckoDesktop("9.0") }}</td> <td> <p>{{ CompatVersionUnknown() }}</p> <p>The data value is always empty.</p> </td> <td>{{ CompatNo() }}</td> <td> <p>{{ CompatVersionUnknown() }}</p> <p>The data attribute value is wrong.</p> </td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("9.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3 id="Gecko_notes">Gecko notes</h3>
<p>According to the DOM Level3 specification, <code>compositionstart</code> is cancelable; however, Gecko doesn't currently let you cancel them.</p>
<p>Gecko fires this event when IME starts composition, and some platforms don't have an API for canceling composition once it's begun. In addition, Gecko can't know whether a keyboard event will start composition or not until IME actually starts composition. Because of this, {{ domxref("event.preventDefault()") }} doesn't work on <code>compositionstart</code> events in Gecko.</p>
<p>{{ languages( { "ja": "ja/DOM/DOM_event_reference/compositionstart","zh-cn": "zh-cn/DOM/DOM_event_reference/compositionstart" } ) }}</p>
Revert to this revision