Appliquer un style uniforme à chaque champs de formulaire [Résolu]

Messages postés
9
Date d'inscription
dimanche 26 juillet 2009
Statut
Membre
Dernière intervention
12 novembre 2009
- - Dernière réponse : Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
- 31 août 2009 à 13:34
Bonjour,

Je suis vraiment dummy en JS et voici ce que j'aimerais arriver à faire. C'est probablement très simple pour vous.

Je voudrais qu'au chargement de ma page, un style soit appliqué à chacun des champs qui se trouvent sur ma page. Voici ce que j'ai fais à date mais cela ne fonctionne pas. J'aimerais savoir ce qui cloche!!

Mon CSS :
input {
 border:1px solid #3C2D7D;
 background-color:#A6BEDE;;
 }

.fieldFocus {
 border:1px solid red;
 }

.fieldBlur {
 border:input;

Vous avez compris que je veux une bordure rouge du champs sur focus et revenir à la normale à la sortie du champs.

Si j'inscris pour chacun de mes input :
onFocus="javascript:this.className='fieldFocus';"
onBlur="javascript:this.className='fieldBlur';"

Ca fonctionne très bien. Par contre, je voudrais ne pas avoir à le faire pour chaque champs car j'ai ai beaucoup et si je décide de changer la couleur, ce sera la galère pour aller les modifier 1 à 1.

Ceci dit, j'ai créé un .js que je lis dans le head de ma page et je charge la fonction setFocusBlur() dans le onLoad du body mais ca fonctionne pas. Voici mon fichier .js :
function fieldFocus() {
this.className = "fieldFocus";
}
function fieldBlur() {
this.className = "fieldBlur";
}

function setFocusBlur() {
var field = document.getElementsByTagName('input');
for (var i = 0; i < field.length; i++){
field[i].focus = fieldFocus();
field[i].blur = fieldBlur();		
}
}

Dans ma page, j'ai évidemment ajouté dans le tag body onLoad="setFocusBlur();" et je load mon fichier .js sans problème dans le head de ma page.
Pourriez-vous me dire qu'est-ce qui me manque??

De plus, j'aimerais ne pas limiter le style aux input mais bien à tous les éléments de formulaire... textarea etc... est-ce possible?

Merci beaucoup!
Afficher la suite 

3 réponses

Meilleure réponse
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
7
3
Merci
même si cela ne résoudra pas tout, tagName
peut servir...
et....àa dépend de comment vous faites cela !!!

sur mon exemple :
for ( var n=0; n<document.frm.elements.length; n++ )
{ if ( document.frm.elements[n].tagName=="INPUT" || document.frm.elements[n].tagName=="TEXTAREA" )
{ document.frm.elements[n].className="b";
....

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 192 internautes nous ont dit merci ce mois-ci

Commenter la réponse de Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
7
0
Merci
Bonjour,
si j'ai compris !
pas loin, pas loin :

<head>
<style>
.f { background-color:red; }
.b { background-color:green; }
</style>
</head>

<form name="frm">


</form>
<script>
for ( var n=0;n<document.frm.elements.length;n++)
{ document.frm.elements[n].className="b";
document.frm.elements[n].onfocus=function()
{ this.className="f"; }
document.frm.elements[n].onblur=function()
{ this.className="b"; }
}
</script>



reste à sélectionner les éléments.
regarder document.frm.elements[n].tagName
ou le name, ou l'id... ou... je ne sais quoi qui
permet de choisir ceux à modifier ;o)

Cordialement [mon Site] [M'écrire] Bul
Commenter la réponse de Bul3
Messages postés
9
Date d'inscription
dimanche 26 juillet 2009
Statut
Membre
Dernière intervention
12 novembre 2009
0
Merci
Ca fonctionne nickel... merci bul3!

Il ne me reste qu'à sélectionner les input, textarea et select car de cette façon, mes class s'appliquent aussi au formulaire en tant que tel.

J'ai essayé la suggestion : document.frm.elements[n].tagName mais je n'y arrive pas.

Quelqu'un aurait une solution pour limiter et appliquer les class seulement à mes champs de formulaires de type input, textarea et select???

Merci beaucoup!!
Commenter la réponse de ofillion