[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()};

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

**SpaceFrog** · 29/04/2007, 09h31

en passant this en paramètre ...

je vais me recycler dans le macramé ...

[DOM] Ajouter un event à une class

JavaScript

Vue hybride

Discussions similaires

Partager

Partager