initial commit

1 files changed, 96 insertions, 0 deletions

diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.html b/files/fr/web/api/htmlelement/beforeinput_event/index.html
new file mode 100644
index 0000000000..72f9239a17
--- /dev/null
+++ b/files/fr/web/api/htmlelement/beforeinput_event/index.html
@@ -0,0 +1,96 @@
+---
+title: 'HTMLElement: beforeinput event'
+slug: Web/API/HTMLElement/beforeinput_event
+translation_of: Web/API/HTMLElement/beforeinput_event
+---
+<div>{{APIRef}} {{SeeCompatTable}}</div>
+
+<p>L’évènement DOM <strong><code>beforeinput</code></strong> est émis quand la valeur d’un élément {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} est sur le point d’être modifié. L’évènement s’applique également aux éléments ayant l’attribut {{domxref("HTMLElement.contentEditable", "contenteditable")}} actif, et à tout élément quand le {{domxref("Document.designMode", "designMode")}} est activé.</p>
+
+<p>Dans le cas de <code>contenteditable</code> et <code>designMode</code>, la cible de l’évènement est <em>l’hôte d’édition.</em> Si ces propriétés s’appliquent à plusieurs éléments, l’hôte d’édition est le plus proche ancêtre dont le parent n’est pas éditable.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Bouillonne</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{DOMxRef("InputEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété gestionnaire d’évènement</th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th>Sync / Async</th>
+   <td>Sync</td>
+  </tr>
+  <tr>
+   <th>Composé</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Action par défaut</th>
+   <td>Mettre à jour l’élément DOM</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input placeholder="Saisissez du texte" name="name"/&gt;
+&lt;p id="values"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('beforeinput', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.HTMLElement.beforeinput_event")}}</p>
+
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Évènement associé : <code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li>
+</ul>