mozilla

Revision 35114 of compositionstart

  • Revision slug: DOM/DOM_event_reference/compositionstart
  • Revision title: compositionstart
  • Revision id: 35114
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment clean up, standardize format; 98 words added, 68 words removed

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.

Launches the text composition system, but Gecko fires compositionstart when the system starts composition actually.

  • 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 {{ CompatUnknown() }} {{ CompatGeckoDesktop("9.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
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.

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>
<p>Launches the text composition system, but Gecko fires <code>compositionstart</code> when the system starts composition actually.</p>
<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>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>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>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoDesktop("9.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</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>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>
Revert to this revision