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

Signaler
Messages postés
9
Date d'inscription
dimanche 26 juillet 2009
Statut
Membre
Dernière intervention
12 novembre 2009
-
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
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!

3 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
7
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";
....
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
7
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
Messages postés
9
Date d'inscription
dimanche 26 juillet 2009
Statut
Membre
Dernière intervention
12 novembre 2009

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!!