Discussion :

[baggie]

Bonjour,

il est possible de changer la couleur de fond d'un input de type text dès que l'on clique dessus. Je sais le faire.

Mais je me demandais, c'est possible de faire en sorte qu'on ait pas à écrire le code à chaque input d'un site ? Genre, dès qu'on fait un onClick, c'est écrit à quelque part (dans une CSS ?) que le fond changera de couleur ?

Merci

[SpaceFrog]

c'est possible dans un beahaviour de css mais très peu utilisé.

Ce qui est par contre très utilisé est de lancer uen petit focntion danS le onlaod ou dans le DOMready pour "peupler" les inputs avec les evenements par exemple leur attribuer un onclick selon leur id, leur tagName ou même leur className c'est là d'ailleurs une des bases de JQuery

[baggie]

Ah oki =)

Mais donc sans utiliser JQuery, je devrais créer une fonction obligatoirement ?

[Gatsu35]

Ecrit en 5 minutes mais pas testé :o

Javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function inputChangeBackFocusHandler(){
	this.className+=' inputFocus';
}
function inputChangeBackBlurHandler(){
	this.className = this.className.replace(/\sinputFocus/g,'');
}
window.onload = function() {
	var inputs = document.getElementsByTagName('input');
	for (var i=0; i<inputs.length: i++) {
		var inp = inputs[i];
		if ((' '+inp.className+' ').match(/\schangeBack\s/)) {
			input.onfocus = inputChangeBackFocusHandler;
			input.onblur = inputChangeBackBlurHandler;
		}
	}
}

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="text" value="foo bar" className="changeBack"/>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.inputFocus {background:red; font-weight:bold;}

Petite chose le window.onload, ça serait bien de la remplacer par un addEventListener ou un addEvent pour IE, mais la flême d'écrire la fonction qui fait ça

[SpaceFrog]

reattribuer sur le onfocus a chaque fois est un peu groumand
autant attribuer une seule fois la fonction au chargement de la page ...

[baggie]

Merci bien pour cette fonction ! Je n'en attendais pas tant

SpaceFrog > utiliser cette fonction comme ça peut réellement ralentir le site ?

[SpaceFrog]

faudrait vraiment avoir une brouette et 10000 inputs...
Le truc c'est que la fonction est lancée chaque fois que l'input prend le focus, je préconise plutot d'attribuer une fonction une fois pour toutes au demarrage ...

[baggie]

Oki, merci pour l'info ^^

[Gatsu35]

reattribuer sur le onfocus a chaque fois est un peu groumand
autant attribuer une seule fois la fonction au chargement de la page ...

Tu as remarqué que je n'attribue l'event onfocus et onblur que une seule fois sur le champ au chargement de la page ????

Après je ne fais que traiter le className sur le onfocus et le onblur

Ou alors j'ai mal compris ta phrase...
edit: j'ai compris, j'aurai du déclarer mes fonctions avant et ne mettre que des références à ces fonctions au lieu de passer par des fonctions anonymes.

Cela étant moins gourmand.
Je modifie