---
title: compositionstart
slug: Web/Events/compositionstart
translation_of: Web/API/Element/compositionstart_event
---
<p>L'événement <strong><code>compositionstart </code></strong><code>est déclenché lorsque la composition d'un passage de texte est préparée (similaire à keydown pour une entrée clavier, mais démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile). </code></p>

<h2 id="Informations_générales">Informations générales</h2>

<dl>
 <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
 <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd>
 <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
 <dd style="margin: 0 0 0 120px;">Oui</dd>
 <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
 <dd style="margin: 0 0 0 120px;">Oui</dd>
 <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
 <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
</dl>

<h2 id="Propriétés">Propriétés</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Property</th>
   <th scope="col">Type</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>target</code> {{ReadOnlyInline}}</td>
   <td>{{domxref("EventTarget")}}</td>
   <td>Elément ayant le focus qui traite la composition</td>
  </tr>
  <tr>
   <td><code>type</code> {{ReadOnlyInline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>Le type de l'événement.</td>
  </tr>
  <tr>
   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
   <td><code>boolean</code></td>
   <td>Est-ce qu'il se propage?</td>
  </tr>
  <tr>
   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
   <td><code>boolean</code></td>
   <td>Peut-il être annulé?</td>
  </tr>
  <tr>
   <td><code>view</code> {{ReadOnlyInline}}</td>
   <td>{{domxref("WindowProxy")}}</td>
   <td>{{domxref("Document.defaultView")}} (fenêtre du document)</td>
  </tr>
  <tr>
   <td><code>detail</code> {{ReadOnlyInline}}</td>
   <td><code>long</code> (<code>float</code>)</td>
   <td>0.</td>
  </tr>
  <tr>
   <td><code>data </code>{{ReadOnlyInline}}</td>
   <td>{{domxref("DOMString")}} (string)</td>
   <td>
    <p>La chaîne de caractères originale éditée ou une chaîne vide.</p>
   </td>
  </tr>
  <tr>
   <td><code>locale </code>{{ReadOnlyInline}}</td>
   <td>{{domxref("DOMString")}} (string)</td>
   <td>Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Navigateur</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support basique</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop("9.0")}}<sup>[2]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Navigateur</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support basique</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("9.0")}}<sup>[2]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] La valeur de l'attribut <em>data</em> est fausse</p>

<p>[2] L'événement a été déclenché dans les versions de Gecko antérieures à la 9.0, mais n'avait pas les attributs et les méthodes DOM Level 3.</p>

<p>Gecko ne supporte pas l'attribut <em>local</em>e pour les événements approuvés pour l'instant. Cependant, cette valeur peut être définie via <code><a href="/fr/docs/Web/API/CompositionEvent#initCompositionEvent()">initCompositionEvent()</a> à la création d'événements non-approuvés.</code></p>

<p>Selon la spécification DOM Level3, <strong>compositionstart</strong> est annulable; Cependant, Gecko ne vous laisse pas l' annuler.</p>

<p>Gecko déclenche l'événement lorsque IME commence la composition, et quelques plateformes n'ont pas d'API pour annuler la composition une fois commencée. De plus, Gecko ne peut pas savoir si un événement clavier va commencé la composition ou non jusqu'à ce que IME ne la commence réellement. A cause de celà, {{domxref("event.preventDefault()")}} ne fonctionne pas sur l'événement <code><strong>compositionstart</strong> avec Gecko.</code></p>

<p>Les éditeurs de Gecko (comme &lt;input type="text"&gt; <code>&lt;div contenteditable/&gt; et designMode) commence la composition après la phase de propagation de <strong>compositionstart</strong>. Donc, au moment où votre gestionnaire de <strong>compositionstart</strong> est appelé, aucun contenu n'a été modifié.</code></p>

<p>[3] La valeur de data est toujours vide.</p>

<h2 id="Evénements_liés">Evénements liés</h2>

<ul>
 <li>{{Event("compositionend")}}</li>
 <li>{{Event("compositionupdate")}}</li>
</ul>