change

L'événement change est déclenché pour les éléments <input> (entrée), <select> (sélection) et <textarea> (zone de texte) lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement input, change n'est pas nécessairement déclenché pour chaque changement de valeur.

Propagation Oui
Annulable Non
Interface Event
Gestionnaire d'événements onchange

En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement change se déclenche à un moment différent :

  • Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour <input type="radio"> et <input type="checkbox">(case à cocher).
  • Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un <select> d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" (sélecteur de date) pour <input type="date">, en sélectionnant un fichier d'un "file picker" (sélecteur de fichier) pour <input type="file">, etc.).
  • Quand l'élément perd le focus après que sa valeur a été changée, mais pas validée (par exemple, après l'édition d'une valeur de <textarea> ou <input type="text">).

Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement change doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments <select> ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du <select> (voir bug 126379).

La spécification HTML répertorie les types <input> qui doivent déclencher l'événement change.

Exemples

L'élément <select>

Le code suivant gère l'événement change sur <select> en appellant la fonction changeEventHandler() dans l'attribut onchange. Il lit la valeur de la cible de l'événement et la montre dans une alerte.

HTML

<label>Choose an ice cream flavor:
  <select class="ice-cream" name="ice-cream">
    <option value="">Select One …</option>
    <option value="chocolate">Chocolate</option>
    <option value="sardine">Sardine</option>
    <option value="vanilla">Vanilla</option>
  </select>
</label>

<div class="result"></div>

Javascript

const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.result');
  result.textContent = `You like ${event.target.value}`;
});

Résultat

L'élément d'entrée de texte

Pour certains éléments, notamment <input type="text">, l'événement de changement ne se déclenche pas tant que le contrôle ne perd pas le focus. Essayez de saisir quelque chose dans le champ ci-dessous, puis cliquez ailleurs pour déclencher l'événement.

HTML

<input placeholder="Enter some text" name="name"/>
<p id="log"></p>

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('change', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

Résultat

Spécifications

Spécification Statut Commentaire
HTML Living Standard
La définition de 'change' dans cette spécification.
Standard évolutif
HTML5
La définition de 'change' dans cette spécification.
Recommendation
Document Object Model (DOM) Level 2 Events Specification
La définition de 'change' dans cette spécification.
Obsolete Définition initiale

Compatibilités navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
onchangeChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 9Opera Support complet 9Safari Support complet 3WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet

Voir aussi

Cet événement est aussi déclenché dans plusieurs API non-standard: