---
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>