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 :
Code :
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 :
Code HTML :
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 :
Code Javascript :
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!