oujood.com

  HTML attribut d’événement onchange

L'événement onchange est un événement HTML déclenché lorsqu'une valeur dans un élément de formulaire change.

chercher |

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

<input onchange="script" />>

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 FirefoxOpera Google ChromeSafari

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



Voir aussi nos tutoriel :

PHP gestion d'erreur

Gestion d'erreur

max-height

Définit la hauteur maximale d'un élément

dessiner des rectangles

SVG Dessiner un  rectangle