HTML attribut d’événement onchange

Définition et utilisation événement onchange

LES BALISES HTML

L'attribut d’événement onchange se déclenche au moment où la valeur de l'élément est modifiée.

L'attribut d’événement onchange peut être utilisé avec les éléments <input>, <textarea> et <select> .

Syntaxe

Valeurs d'attribut

Valeur	Description
script	Le script à exécuter sur onchange

Exemple Vérifier un champ d'entrée lorsque la valeur est modifiée :

Exemple : 📋 Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>html5 demo</title>
  <script>
  function checkField(val)
  {
  alert("Le texte a changé. Le nouveau texte est :+ val);
  }
  </script>
  </head>
  <body>
  <p>Modifiez le texte dans le champs de saisie suivant puis cliquez à
  l'extérieur du champs</p>
  Tapez un texte : <input type="text" name="txt" value="Bonjour"
  nchange="checkField(this.value)">
  </body>
  </html>

Autre exemple pratique :

Supposons que nous ayons une liste déroulante (élément <select>) et nous voulons déclencher une fonction JavaScript lorsqu'une option est sélectionnée pour afficher la couleur sélectionnée dans l'élément avec l'id "affichageCouleur" :

Exemple : 📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple onchange</title>
</head>
<body>
    <h2>Choisissez une couleur :</h2>
    <select id="choixCouleur" onchange="changerCouleur()">
		<option value="rouge">Sélectionner une option </option>
        <option value="rouge">Rouge</option>
        <option value="vert">Vert</option>
        <option value="bleu">Bleu</option>
    </select>

    <p id="affichageCouleur">La couleur sélectionnée est :</p>

    <script>
        function changerCouleur() {
            // Récupère l'élément select avec l'id "choixCouleur"
            var select = document.getElementById("choixCouleur");
            
            // Récupère la valeur de l'option sélectionnée
            var couleurSelectionnee = select.options[select.selectedIndex].value;
            
            // Modifie la couleur du texte dans l'élément avec l'id "affichageCouleur"
            document.getElementById("affichageCouleur").style.color = couleurSelectionnee;
            
            // Met à jour le texte dans l'élément avec la couleur sélectionnée
            document.getElementById("affichageCouleur").textContent = "La couleur sélectionnée est : " + couleurSelectionnee;
        }
    </script>

</body>
</html>

Appui de navigateurs

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut d'événement onchange est pris en charge dans tous les principaux navigateurs.

Astuces et conseils d'utilisation :

Utilisez l'événement onchange avec des éléments de formulaire tels que <select>, <input type="checkbox">, ou <input type="radio">.
Évitez d'utiliser onchange avec des éléments tels que <input type="text">, car cela peut entraîner une expérience utilisateur imprévisible.
Assurez-vous que la fonction spécifiée dans l'attribut onchange est définie dans votre script JavaScript.

Différences entre HTML 4.01 et HTML5

Aucune.

Retour à la Liste attribut d'événement

Accueil du site

Par carabde 10 mars 2014