diff options
Diffstat (limited to 'files/fr/web/api/element/compositionend_event/index.md')
| -rw-r--r-- | files/fr/web/api/element/compositionend_event/index.md | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/files/fr/web/api/element/compositionend_event/index.md b/files/fr/web/api/element/compositionend_event/index.md new file mode 100644 index 0000000000..546f6b3c5f --- /dev/null +++ b/files/fr/web/api/element/compositionend_event/index.md @@ -0,0 +1,128 @@ +--- +title: compositionend +slug: Web/API/Element/compositionend_event +translation_of: Web/API/Element/compositionend_event +original_slug: Web/Events/compositionend +--- +<p>L'événement <strong><code>compositionend</code></strong> est déclenché lorsque la composition d'un texte via {{glossary("input method editor", "méthode de saisie")}} est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile).</p> + +<p>Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie <a href="https://en.wikipedia.org/wiki/Pinyin">Pinyin</a>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Se propage/remonte dans le DOM</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("CompositionEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété pour la gestion d'évènement</th> + <td>Aucune</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="Html">Html</h3> + +<pre class="brush: html"><div class="control"> + <label for="name">Sur macOS, cliquez sur la boîte de texte,<br> puis appuyez sur <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd>:</label> + <input type="text" id="example" name="example"> +</div> + +<div class="event-log"> + <label>Log d'événement:</label> + <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> + <button class="clear-log">Effacer</button> +</div></pre> + +<pre class="brush: css hidden">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> + +<h3 id="JS">JS</h3> + +<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 = ''; +}); + +function handleEvent(event) { + log.textContent = log.textContent + `${event.type}: ${event.data}\n`; +} + +inputElement.addEventListener('compositionstart', handleEvent); +inputElement.addEventListener('compositionupdate', handleEvent); +inputElement.addEventListener('compositionend', handleEvent);</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{ EmbedLiveSample('Exemple', '100%', '180px') }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-compositionend')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2> + +<p>{{Compat("api.Element.compositionend_event")}}</p> + +<h2 id="Evénements_liés">Evénements liés</h2> + +<ul> + <li>{{Event("compositionstart")}}</li> + <li>{{Event("compositionupdate")}}</li> +</ul> |