 |
 |
 |
 |
|
 |
 |
 |
  Home Page Tous les scripts Proposer un script Recherche de script AJAX new! Cours de JavaScript Liste de discussion Forums CountUs myCircle Referencement Créat. de bannière HTML / CSS PHP / MySQL Réferencement Graph / Présentation Toutes les astuces Ajouter un article
 
Hebergement web Referencement Sites webmasters XHTML - CSS2 PHP Affiliation - Pub FAI Annuaire webmaster Kits graphiques Comparateur de prix Foire aux questions Les membres Devenir annonceur Faire un lien Contact Hebergement gratuit Le PHP facile Horoscope Comscripts WebmasterClub L'écriteau Faro-dessing Activeartanima... Le village de ... Images gifs an... Netsources Easy-script.com Création de site Créer son site... K i s s design Les autres Votre site ici
? |
Article posté par : EricM Date de mise en ligne : 2-12-2005 Niveau : Assez facile >> Ajouter un article  Sous IE : gérer onChange avec la balise label sur radio et checkbox
Problème de la balise label sous IE
Attention : ne concerne que Internet Explorer ! :) Problème de la balise label sous IE
Lors de l'utilisation (très conviviale et présentée dans un autre article) de la balise label associée à un radio ou une checkbox sous IE, l'évènement onChange de l'input ne se déclenche plus. En effet, il est associé à une modification du champ (ici coché / non coché) ET à une perte de focus dudit champ. Or la balise label permet de modifier la valeur du champ sans que celui-ci reçoive le focus. Il ne le perd donc pas suite à la modification, et le onChange ne se déclenche pas. Si d'autres navigateurs savent gérer cette fonctionnalité, ce n'est pas le cas d'IE ;) Remarque : le onChange sur un radio ou une checkbox est de toute façon problématique avec IE, puisqu'après un clic (qui modifie la valeur du champ), il n'y a pas de perte de focus, IE ne déclenche donc pas l'évènement. Il faut, pour le déclencher, sortir volontairement du champ modifié. Une solution simple
Pour remédier à ce(s) problème(s), il suffit de remplacer l'évènement onChange par l'évènement onClick. En effet, le tag label semble générer un onClick sur le champ associé, ce qui résoud tous les problèmes cités plus haut.
<html>
<head> </head> <body> Avec onChange il faut cliquer sur le radio, puis re-cliquer "à l'extérieur" du champ pour déclencher le onChange :<br /> <input type="radio" id="radio_1" name="radios" onChange="alert('Champ 1 cliqué');"> <label for="radio_1">Champ 1</label> <br /> <input type="radio" id="radio_2" name="radios" onChange="alert('Champ 2 cliqué');"> <label for="radio_2">Champ 2</label> <br /><br /> Avec onClick plus de problémes :<br /> <input type="radio" id="radio_10" name="radios" onClick="alert('Champ 1 cliqué');"> <label for="radio_10">Champ 1</label> <br /> <input type="radio" id="radio_20" name="radios" onClick="alert('Champ 2 cliqué');"> <label for="radio_20">Champ 2</label> </body> </html> Ce qui donne :
Avec onChange on doit cliquer sur le radio, puis re-cliquer "à l'extérieur" du champ pour déclencher le onChange :
Avec onClick plus de problémes : Annotations des visiteurs :
>> Poster une annotation sur cette astuce
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
De 
 |
 |
 |
La mini-astuce "Divers" du jour par QuentinC Saviez-vous que vous pouvez utiliser votre navigateur comme client FTP ? Pour cela, entrez une adresse du type : ftp://nom_utilisateur:mot_de_passe@ftp.serveur.com Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 13/05/2008 15:00:14 | Design by Studcrea | Gen. en 0.493 sec.
|
 |