Appliquer un style uniforme à chaque champs de formulaireRésolu

Question

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!

Bul3 · Accepted Answer

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";
....

Bul3 · Answer

Bonjour, si j'ai compris ! pas loin, pas loin : 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

ofillion · Answer

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

Appliquer un style uniforme à chaque champs de formulaire

3 réponses

Votre réponse

Discussions similaires