[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