Changer couleur de fond d'un input sur le onClick

Version imprimable

21/10/2009, 16h29
baggie

Changer couleur de fond d'un input sur le onClick

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 :)
21/10/2009, 20h59
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
22/10/2009, 08h46
baggie

Ah oki =)

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

Ecrit en 5 minutes mais pas testé :o

Javascript

Code:

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:

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

CSS :

Code:

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

22/10/2009, 14h28
SpaceFrog

reattribuer sur le onfocus a chaque fois est un peu groumand
autant attribuer une seule fois la fonction au chargement de la page ...
22/10/2009, 14h35
baggie

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

SpaceFrog > utiliser cette fonction comme ça peut réellement ralentir le site ?
22/10/2009, 14h45
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 ...
22/10/2009, 14h47
baggie

Oki, merci pour l'info ^^
22/10/2009, 18h40
Gatsu35

Citation:

Envoyé par SpaceFrog

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