[DOM] Ajouter un event à une class

Version imprimable

26/04/2007, 15h03
Nulenprogra

[DOM] Ajouter un event à une class

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
26/04/2007, 21h27
Auteur

Citation:

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 :koi:
-que les input aient l'événement on focus déjà déclaré :koi::koi:

Que veux-tu faire ??
26/04/2007, 21h32
SpaceFrog

mettre dynamiquement une fonction à tous les elements dans leur onfocus sur le onload de la page ...
27/04/2007, 07h42
Nulenprogra

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.

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:

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

27/04/2007, 09h18
SpaceFrog

Citation:

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:

fields[i].onfocus = function(){gotFocus()};
27/04/2007, 09h24
marcha

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

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:

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:

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....

27/04/2007, 10h08
SpaceFrog

???

Citation:

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

Lapin compris ... 8O
27/04/2007, 10h19
marcha
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:

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"; }
27/04/2007, 10h30
SpaceFrog

heu et passer this en argumant de focntion ne suffit pas ?
27/04/2007, 11h14
marcha

Oui, je suis preneur si tu sais comment le faire avec une callback évènementielle.
27/04/2007, 11h23
SpaceFrog

un callback evenementiel ???

heu ça fait partie des mammifères ça ???

tu n'aurais pas un exemple, parceque là tu me parles chinois ...
27/04/2007, 11h36
marcha

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;
28/04/2007, 08h46
SpaceFrog

????
autant utiliser la notation toto(this) alors non ?
28/04/2007, 09h29
Nulenprogra

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

sans doute rien compris à ce que tu veux;

pourquoi ce type de code ne conviendrait pas?

Code:

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>

28/04/2007, 12h42
marcha

Citation:

Envoyé par javatwister

sans doute rien compris à ce que tu veux;

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

Je pense que ta solution est idéale.
28/04/2007, 16h39
SpaceFrog

Ben c'est pas ce que l'on dit depuis le début ça ?
28/04/2007, 19h23
marcha

Citation:

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.
29/04/2007, 09h31
SpaceFrog

en passant this en paramètre ... :?

je vais me recycler dans le macramé ... :aie:
29/04/2007, 19h53
marcha

Citation:

Envoyé par SpaceFrog

en passant this en paramètre ... :?

Ben justement pas. this n'est pas passé en paramètre
30/04/2007, 09h26
Nulenprogra

je suis partant pour suivre des cours de macramé... :?

c'est vrai que cette solution est très bonne (sauf que je n'ai plus les border.style en 3d... c'est pas bô)

quand à comprendre la subtile nuance entre passer this en paramètre ou l'utiliser dans l'appel de la fonction...c'est pas évident pour moi.

mais je sens que j'approche de ce que j'ai besoin :yaisse2:
30/04/2007, 11h19
SpaceFrog

ha désolé j'avais pourtant cru que là :

Code:

{this.style.borderWidth="4px"}

y'avait du this ..

bon c'est pas this complet, ce n'est que son style border ... mais bon ...

sinon le noeud plat c'est sympa aussi :aie:

Fuseau horaire GMT +2. Il est actuellement 10h05.