diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:14 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
| commit | c05efa8d7ae464235cf83d7c0956e42dc6974103 (patch) | |
| tree | 6ea911b2f2010f63a026de6bb7a1a51e7690a7e1 /files/fr/web/api/element/compositionstart_event/index.html | |
| parent | 13a5e017558b248ee1647d4a5825f183b51f09ad (diff) | |
| download | translated-content-c05efa8d7ae464235cf83d7c0956e42dc6974103.tar.gz translated-content-c05efa8d7ae464235cf83d7c0956e42dc6974103.tar.bz2 translated-content-c05efa8d7ae464235cf83d7c0956e42dc6974103.zip | |
move *.html to *.md
Diffstat (limited to 'files/fr/web/api/element/compositionstart_event/index.html')
| -rw-r--r-- | files/fr/web/api/element/compositionstart_event/index.html | 144 |
1 files changed, 0 insertions, 144 deletions
diff --git a/files/fr/web/api/element/compositionstart_event/index.html b/files/fr/web/api/element/compositionstart_event/index.html deleted file mode 100644 index 4de27018bc..0000000000 --- a/files/fr/web/api/element/compositionstart_event/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -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 ---- -<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="Examples">Exemples</h2> - -<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); - -inputElement.addEventListener('compositionstart', (event) => { - console.log(`generated characters were: ${event.data}`); -});</pre> - -<h3 id="Live_example">Exemple concret</h3> - -<h4 id="HTML">HTML</h4> - -<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 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> - -<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> - -<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 = ''; -}); - -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> - -<h4 id="Result">Résultat</h4> - -<p>{{ EmbedLiveSample('Live_example', '100%', '180px') }}</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>{{Compat("api.Element.compositionstart_event")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>Événements liés : {{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}.</li> -</ul> |
