Sn@kes | Bonjour tout le monde
J'aimerai savoir s'il est possible d'appeler une fonction javascript grace a des classes CSS sur des evenement types onkeyup, onchange, on blur .... ou par un moyen generique autre que CSS
Sous XUL il est possible de determiner le comportement d'un conteneur de classe X sur des evenements mais je n'ai pas trouvé d'equivalent pour IE. En gros je souhaiterai automatiser l'appel de la fonction appropriée pour chaque classe CSS.
Apres quelques tests voici une methode possible qui fonctionne pour IE7 et FF2. J'aimerai savoir s'il y a des ameliorations a apporter dessus.
Code :
- // Fonctions qui recupere les element en fonction de la valeur d'attribut
- function getElementsByAttribute;{
- //voir http://javascript.internet.com/sni [...] ibute.html ; quelques modif necessaires pour compatibilité
- }
- //Ajoute les fonctions sur les evenement pour une classe
- function setEventOnClass(tag, valeur){
- var liste=getElementsByAttribute("*",tag, valeur);
- for (var i=0; i<liste.length; i++){
- el=liste;
- if (el.addEventListener) {
- el.addEventListener ("blur", fonction_blur(el) ,false);
- el.addEventListener ("change", fonction_change(el) ,false);
- el.addEventListener ("keyup", fonction_keyup(el) ,false);
- }
- else if (el.attachEvent) {
- el.attachEvent ("onblur", fonction_blur(el) );
- el.attachEvent ("onchange", fonction_change(el) );
- el.attachEvent ("onkeyup", fonction_keyup(el) );
- }
- else {
- el.onblur=fonction_blur(el);
- el.onchange=fonction_change(el);
- el.onkeyup=fonction_keyup(el);
- }
- }
- }
- //Ajoute les evenement pour une liste de classe en appelant [i]setEventOnClass pour chaque item de la liste
- function setEvent(liste){
- for(var i=0;i<liste.length; i++){
- tag=liste[i][0];
- valeur=liste[i][1];
- setEventOnClass(tag, valeur);
- }
- }
|
Et pour charger les evenements sur les tag concernés on ajoute un onload
Exemple :
Code :
- ....
- <head>
- <script language='javascript'>
- var liste=new Array();
- var classe_1= new Array("class", "classe_exemple_1" );
- var classe_2= new Array("class", "classe_exemple_2" );
- liste[0]= classe_1;
- liste[1]= classe_2;
- </script>
- </head>
- <body onload="setEvent(liste)";>
- ...
- <INPUT id="CHAMP_TEST" type="text" class="classe_exemple_1">
- <INPUT id="CHAMP_TEST_2" type="text" class="classe_exemple_2">
- ...
|
Message édité par Sn@kes le 20-09-2007 à 08:59:56
|
