begin process at 2010 03 21 16:12:10
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > CHANGEMENT DE STYLE SUR FOCUS

CHANGEMENT DE STYLE SUR FOCUS


 Information sur la source

Note :
8,5 / 10 - par 4 personnes
8,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Initié Date de création :04/09/2002 Date de mise à jour :04/09/2002 13:56:07 Vu / téléchargé :10 449 / 585

Auteur : Romuald

Ecrire un message privé
Commentaire sur cette source (5)
Ajouter un commentaire et/ou une note

 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

  • /* 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");
  • }
/* 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 ;)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

INCLUDE() EN JAVASCRIPT
Source avec Zip Source avec une capture BARRES DE PROGRESSION ANNIMÉES
Source avec Zip TESTEUR D'EXPRESSIONS REGULIERES
VÉRIFIER UNE DATE

 Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

Commentaires et avis

Commentaire de hypnotiseur le 16/01/2003 10:20:48

tres bien  fait, alors bonne continuation

Commentaire de DARTHVADOR le 24/02/2003 09:19:01

très mal fait, alors tire toi une balle

Commentaire de jjdagadir le 12/12/2003 18:51:19

C'est clean, utile à dispo et facile alors çà vaut 10 !
KENAVO

Commentaire de LUDINSKI le 29/07/2004 09:32:20

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.

Commentaire de mtorby le 31/07/2009 12:06:48

merci pour ce code :)  

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,312 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales