Changement de style sur focus

Soyez le premier à donner votre avis sur cette source.

Vue 13 276 fois - Téléchargée 667 fois

Description

Voici une petite source bien pratique pour donner à vos formulaires un peu plus de dynamisme.
Le script vous permet de changer la classe d'un champ de formulaire lorsque celui-ci reçoit le focus (et de remettre l'anciène classe ensuite).
La particularité de ce script est qu'il ne vous oblige pas à mettre un onfocus="" et onblur="" pour CHAQUE élement de formulaire. L'exemple montre comment spécifier tous les INPUT de la page, comment prendre en compte l'héritage des CSS pour avoir des effets variables en fonction d'une classe parente. Ainsi que la possibilité de donner pour tel groupe d'élement une autre classe CSS que celle par défaut.

Source / Exemple :


/* Voici juste le code javascript : l'exemple complet est dans le zip */

/* Fonction à appeller pour initialiser les évenements */
function setEvents(domElements /* Array */, aClassName /* Optional */) {
	if (!aClassName)
		aClassName = "focus";

	for (i = 0; i < domElements.length; i++) {
		domElements[i].onfocus = inputFocus;
		domElements[i].onblur = inputBlur;
		domElements[i].setAttribute("focusClassName", aClassName);
	}
}

function inputFocus(e) {
	this.setAttribute("oldFocusClassName", this.className);
	this.className = this.getAttribute("focusClassName");
}

function inputBlur(e) {
	this.className = this.getAttribute("oldFocusClassName");
}

/* Après avoir fini le chargement */
function load() {
	/*
		On spécifie le focus pour tous les input
		et textarea du document avec la classe par défaut

  • /
setEvents(document.getElementsByTagName("input")); setEvents(document.getElementsByTagName("textarea")); /* L'email est important :) On spécifie la classe "important" donc pour le focus On aurait également pu tirer parti de l'héritage des CSS
  • /
setEvents(Array(document.getElementById("email")), "important"); }

Conclusion :


Pour la compatibilité testé sous IE 6 et Mozilla (donc Netscape 6/7 ;)
Ceci ne marche PAS sous Netscape 4.xx.
Quand à IE 5, je ne sais pas s'il prend en compte les fonctions setAttribute et getAttribute

Vos commentaires sont les bienvenus ;)

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

mtorby
Messages postés
1
Date d'inscription
vendredi 31 juillet 2009
Statut
Membre
Dernière intervention
31 juillet 2009
-
merci pour ce code :)
LUDINSKI
Messages postés
441
Date d'inscription
mardi 2 décembre 2003
Statut
Membre
Dernière intervention
22 mai 2012
6 -
Rien à dire, à part que Darthvador n'aurait pas fait mieux, .....

Non, vraiment, sympa !!
Et pour une fois, un code commenté ! C'est d'autant plus important en JavaScript...

Bravo et bonne continuation.
cs_jjdagadir
Messages postés
127
Date d'inscription
lundi 7 avril 2003
Statut
Membre
Dernière intervention
6 mars 2009
-
C'est clean, utile à dispo et facile alors çà vaut 10 !
KENAVO
DARTHVADOR
Messages postés
12
Date d'inscription
jeudi 30 janvier 2003
Statut
Membre
Dernière intervention
6 octobre 2003
-
très mal fait, alors tire toi une balle
hypnotiseur
Messages postés
9
Date d'inscription
mercredi 1 janvier 2003
Statut
Membre
Dernière intervention
17 juillet 2006
-
tres bien fait, alors bonne continuation

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.