[DOM] Ajouter un event � une class

**Nulenprogra** · 26/04/2007, 15h03

Bonjour,

alors voil�, j'aimerais faire le truc suivant: avoir pour une page qui a une entry form, que tous les champs r�agissent � la m�me fonction lors d'un onFocus.

j'ai bien sur la solution de mettre pour tous les <input> un onFocus="gotFocus();", mais je voudrais savoir s'il n'y a pas moyen de mettre l'event dans une class ? et que tous les <input> de la page ai l'event onFocus d�j� d�clar� ?

merci

**Auteur** · 26/04/2007, 21h27

mais je voudrais savoir s'il n'y a pas moyen de mettre l'event dans une class ? et que tous les <input> de la page ai l'event onFocus d�j� d�clar� ?

-un �v�nement sur une classe

-que les input aient l'�v�nement on focus d�j� d�clar�

Que veux-tu faire ??

**SpaceFrog** · 26/04/2007, 21h32

mettre dynamiquement une fonction � tous les elements dans leur onfocus sur le onload de la page ...

**Nulenprogra** · 27/04/2007, 07h42

Voil�, c'est �a.

Donc, j'ai une form avec 10 <input>.

je veux que pour chaque input, quand on est dedans, un border apparait, et disparait quand on sort du champ.

je l'ai fait "facilement" avec un onFocus="gotFocus(this)" pour mettre le border et un onBlur="lostFocus(this)" pour le retirer.

les fonctions gotFocus et lostFocus �tant d�clar�s avant biensur

mais, je dois d�clarer les appels pour les 10 champs.

je me demandais si je ne pourrais pas d�clarer mes champs <input class="avecBorder"> et que cette class ai d�j� les appels pour les onBlur et onFocus.

**marcha** · 27/04/2007, 09h13

Salut,

Je vois deux solutions � ton probl�me

1) Pure CSS avec

input.avecBorder:focus { border: 1px solid red; }

ce qui ne fonctionne pas sur IE6 sauf erreur

2) Javascript, comme l'a dit SpaceFrog, ce qui ressemble � ceci

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
 
function initFocus() {
  var fields = document.getElementsByTagName('input');
  for(var i=0;i<fields.length;i++) {
    // tester qu'il s'agit bien d'un input avec la classe avecBorder ici
    fields[i].onfocus = gotFocus; // addEventListener serait meilleur aujourd'hui
    fields[i].onblur = lostFocus;
  }
}
 
...
<body onload='initFocus()'>

L'approche javascript pose quelque probl�mes de compatibilit� entre les
navigateurs qu'il faut g�rer. Je te sugg�re de lire ceci

http://gilles.chagnon.free.fr/cours/...venements.html

**SpaceFrog** · 27/04/2007, 09h18

L'approche javascript pose quelque probl�mes de compatibilit� entre les
navigateurs qu'il faut g�rer.

heu non pas de soucis de compatibilit� si tu utilise cette syntaxe::

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

fields[i].onfocus = function(){gotFocus()};

**marcha** · 27/04/2007, 09h24

Oui, SpaceFrog, jusque l�, pas de soucis. Mais c'est pour connaitre
le champs sur lequel la souris a pass� que cela devient incompatible

**Nulenprogra** · 27/04/2007, 09h40

Hello,

j'aime bien la soluce de la fonction appel�e dans le onload.

mais comme vous le dites, comment savoir le champs appel� � ce moment l� ?

voil� mes fonctions

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
function gotFocus(obj) {
	saved = obj.style.borderWidth;
	obj.style.borderWidth='2px';
	obj.style.borderColor='black';
}
function lostFocus(obj) {
	obj.style.borderWidth='';
	obj.style.borderColor='';
}

il faut leur donner l'object en cours (que je passe par "this").

j'essaie les possibilit�s suivantes

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
fields[i].onfocus = gotFocus;
fields[i].onblur = lostFocus;
 
fields[i].onfocus = gotFocus(fields[i]);
fields[i].onblur = lostFocus(fields[i]);

sans trop de succ�s....

**SpaceFrog** · 27/04/2007, 10h08

???

Mais c'est pour connaitre
le champs sur lequel la souris a pass� que cela devient incompatible

Lapin compris ...

**marcha** · 27/04/2007, 10h19

Salut,

Il te faut lire le lien que j'ai donn� plus haut. En particulier ce qui concerne
l'objet event

L'objet event te permet de connaitre l'�l�ment DOM qui a d�clench� l'�v�nement

event.target pour les navigateurs dignes de ce nom
et event.srcElement pour IE

donc l'�l�ment qui t'int�resse s'obtient ainsi:

var e = event.target || event.srcElement;

Mais ce n'est pas fini, il faut obtenir l'objet event. A nouveau IE est diff�rent
il utilise window.event (en global pour le dernier �v�nement) alors que les
autres navigateur re�oivent en param�tre l'�v�nement.

Dans ton cas tes gestionnaires d'�v�nements devraient ressembler � ceci:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
function gotFocus(event) {
    event = event || window.event;
    var e = event.target || event.srcElement;
    e.style.border = "1px solid red";
}

**SpaceFrog** · 27/04/2007, 10h30

heu et passer this en argumant de focntion ne suffit pas ?

**marcha** · 27/04/2007, 11h14

Oui, je suis preneur si tu sais comment le faire avec une callback �v�nementielle.

**SpaceFrog** · 27/04/2007, 11h23

un callback evenementiel ???

heu �a fait partie des mammif�res �a ???

tu n'aurais pas un exemple, parceque l� tu me parles chinois ...

**marcha** · 27/04/2007, 11h36

Oui les exemples donn�e dans ce post sont des fonctions callback li�e
� des �v�nement, par exemple:

fields[i].onfocus = gotFocus;

gotFocus est une r�f�rence � une fonction que l'on assigne � un �v�nement.
la fonction est appel�e par le gestionnaire d'�v�nement lorsque l'�v�nement
ce produit.

Mais peu importe comment on appelle �a. Le probl�me c'est que les param�tres
transmis � la fonction sont ceux que le gestionnaire d'�v�nement veut bien passer.

A ma connaissance, tu ne peux pas passer le 'this' dans cette notation.

le this peut �tre pass� dans ce genre de notation:

<a id='truc' href='...' onclick='toto(this);'>

mais pas quand tu assigne l'�v�nement ainsi:

document.getElementById('truc').onclick = toto;

**SpaceFrog** · 28/04/2007, 08h46

????
autant utiliser la notation toto(this) alors non ?

**Nulenprogra** · 28/04/2007, 09h29

Spacefrog,

si je voulais utiliser "this", cela veut dire que je dois mettre mes fonction onfocus et onblur dans chaque tag input.

alors que mon but est de ne pas le faire individuellement par tag, mais que cela soit automatique.

T

**javatwister** · 28/04/2007, 09h54

sans doute rien compris � ce que tu veux;

pourquoi ce type de code ne conviendrait pas?

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style type="text/css">
 
 
#champs input {
margin-top:5px;
border:1px solid;
}
 
 
</style>
 
</head>
 
<body>
 
 
 
<form id="f" action="">
	<div id="champs">
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<input type="text" />
	</div>
</form>
 
<script type="text/javascript">
 
 
 
var ch=document.getElementById("f").elements;
 
for(i=0;i!=ch.length;i++){
	ch[i].onfocus=function(){this.style.borderWidth="4px"}
	ch[i].onblur=function(){this.style.borderWidth="1px"}
}
 
</script>

**marcha** · 28/04/2007, 12h42

Envoy� par javatwister

sans doute rien compris � ce que tu veux;

Pour quelqu'un qui n'a rien compris tu t'en sors bien

Je pense que ta solution est id�ale.

**SpaceFrog** · 28/04/2007, 16h39

Ben c'est pas ce que l'on dit depuis le d�but �a ?

**marcha** · 28/04/2007, 19h23

Envoy� par SpaceFrog

Ben c'est pas ce que l'on dit depuis le d�but �a ?

En partie. Tu as donn� d�s ton premier post (m�me si c'est pas d�taill�) la solution pour appliquer une m�me fonction � tous les champs.

Mais ce que javatwister apporte de concret en plus, c'est une mani�re simple
d'agir sur le champ input qui a appel� la fonction.

[DOM] Ajouter un event � une class

JavaScript

Discussions similaires

Partager

Partager