diff options
Diffstat (limited to 'files/fr/web/api/element/compositionstart_event/index.html')
| -rw-r--r-- | files/fr/web/api/element/compositionstart_event/index.html | 245 |
1 files changed, 123 insertions, 122 deletions
diff --git a/files/fr/web/api/element/compositionstart_event/index.html b/files/fr/web/api/element/compositionstart_event/index.html index 25ef560400..4cb57ef36e 100644 --- a/files/fr/web/api/element/compositionstart_event/index.html +++ b/files/fr/web/api/element/compositionstart_event/index.html @@ -1,147 +1,148 @@ --- title: compositionstart slug: Web/API/Element/compositionstart_event +tags: + - Element + - Event + - Input method + - Reference + - compositionstart translation_of: Web/API/Element/compositionstart_event original_slug: Web/Events/compositionstart --- -<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> +<div>{{APIRef}}</div> + +<p>L'événement <strong><code>compositionstart</code></strong> est déclenché lorsqu'un système de composition de texte tel qu'une {{glossary("input method editor","méthode de saisie")}} démarre une nouvelle session de composition.</p> + +<p>Par exemple, cet événement pourrait être déclenché après qu'un utilisateur a commencé à saisir un caractère chinois en utilisant un <a href="https://en.wikipedia.org/wiki/Pinyin">Pinyin</a> IME.</p> + +<table class="properties"> + <tbody> + <tr> + <th>Propagation</th> + <td>Oui</td> + </tr> + <tr> + <th>Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("CompositionEvent")}}</td> + </tr> + <tr> + <th>Propriété du gestionnaire d'événements</th> + <td>Aucune</td> + </tr> + </tbody> +</table> -<h2 id="Informations_générales">Informations générales</h2> +<h2 id="Examples">Exemples</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> +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); -<h2 id="Propriétés">Propriétés</h2> +inputElement.addEventListener('compositionstart', (event) => { + console.log(`generated characters were: ${event.data}`); +});</pre> -<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> +<h3 id="Live_example">Exemple concret</h3> -<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> +<h4 id="HTML">HTML</h4> -<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> +<pre class="brush: html"><div class="control"> + <label for="name">Sur macOS, cliquez dans la zone de texte ci-dessous,<br> puis tapez <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd> :</label> + <input type="text" id="example" name="example"> +</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 class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> + <button class="clear-log">Clear</button> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + padding: .2rem; + display: grid; + grid-template-areas: "control log"; +} + +.control { + grid-area: control; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +input[type="text"] { + margin: .5rem 0; +} + +kbd { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +} +</pre> </div> -<p>[1] La valeur de l'attribut <em>data</em> est fausse</p> +<h4 id="JS">JS</h4> + +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); +const log = document.querySelector('.event-log-contents'); +const clearLog = document.querySelector('.clear-log'); + +clearLog.addEventListener('click', () => { + log.textContent = ''; +}); -<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> +function handleEvent(event) { + log.textContent = log.textContent + `${event.type}: ${event.data}\n`; +} -<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> +inputElement.addEventListener('compositionstart', handleEvent); +inputElement.addEventListener('compositionupdate', handleEvent); +inputElement.addEventListener('compositionend', handleEvent); +</pre> -<p>Selon la spécification DOM Level3, <strong>compositionstart</strong> est annulable; Cependant, Gecko ne vous laisse pas l' annuler.</p> +<h4 id="Result">Résultat</h4> -<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>{{ EmbedLiveSample('Live_example', '100%', '180px') }}</p> -<p>Les éditeurs de Gecko (comme <input type="text"> <code><div contenteditable/> 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> +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-compositionstart')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> -<p>[3] La valeur de data est toujours vide.</p> +<p>{{Compat("api.Element.compositionstart_event")}}</p> -<h2 id="Evénements_liés">Evénements liés</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li>{{Event("compositionend")}}</li> - <li>{{Event("compositionupdate")}}</li> + <li>Événements liés : {{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}.</li> </ul> |