Tout savoir sur Bitcoin.
Définition et utilisation événement onchange
LES BALISES HTMLL'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
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.
Par carabde 10 mars 2014