Changement de style sur focus

Télécharger le projet
Commenter

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 ;)
Télécharger le projet

Codes Sources

A voir également

Du même auteur (cs_Romuald)