Discussion :

[redah75]

Bonjour a tous, ayant cherche peandant des heures et des heures, je decide de poster en esperant avoir des reponses...

Ce que je souhaite faire est d'associer un evenement js (onFocus ou OnBlur) a un still.

Exemple: j'ai un champ text, j'aimerai que lorsque je clique dessus, le fond devient bleu, je sais qu'il faut faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text"... onFocus="ma_fonction1();" onBlur="ma_fonction2();" ...>

mais je souhaiterai le faire de cette maniere:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text"... class='ma_class' ...>

et dans ma_class, on definit le onFocus et onBlur()

j'ai vu un site qui le fait, j'ai visualise son code et il n'y a paas de onFocus dans le champ text!!

Merci de votre aide

[Ethyde]

Avec les pseudo class :focus et :target ?

http://www.w3.org/TR/CSS2/selector.h...pseudo-classes

[GihefBey]

Bonjour,

Ton message aurait sa place dans Javascript.

Si tu ne trouves pas d'événement dans les balises, c'est peut-être que c'est codé un peu plus proprement ?

-

[Alt157]

Le but étant de séparer au maximum la partie traitement de l'interface. Il est courant d'utiliser des class pour éviter de mettre du js directement dans la page.

Je prends un exemple tout con : ouvrir un lien vers un autre site.

Tu ferais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="http://www.monsite.com" target="_blanck">mon site </a>

Mais comme c'est pas valide tu passerai directement par js. Cela donnerait donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="http://www.monsite.com" onclick="window.open(this.href);return false;" >mon site </a>

Mais comme nous devons séparer les parties et pour un souci de maintenance... Imagines que l'on veut changer le comportement sur tous les liens du site pointant a l'extérieur... Cela serait pas évident donc le plus simple et d'utiliser les classes et ainsi avoir un code plus propre a la lecture et plus simple a maintenir.

Donc niveau html tu aurais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="http://www.monsite.com" class="exterieur" >mon site </a>

et dans ton fichier js

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
 
// Fonction a appeler apres le chargement de la page
onload = chargement;
 
function chargement()
{
 var liens = document.getElementsByTagName('a');
 var longueur = liens.length;
 // on boucle sur tous les liens
 for( i = 0; i < longueur; i++)
 {
   // si il possede la classe en question
   if(liens[i].className.indexOf('exterieur') > -1 )
   {
      // on ajoute l evenement
      liens[i].onclick = ouvrirFenetre;
   }
 }
}
 
function ouvrirFenetre()
{
  window.open(this.href); 
  return false;
}

Donc sur le meme principe il te faut créer une classe pour tes textbox et dans javascript boucler sur tous tes textbox et lorsque tu en trouves un possédant la bonne classe tu lui ajoutes les evenements focus et blur.

[redah75]

Oh lalaaaa, j'ai meme pas ete notifie par vos reponses, c'est que par hasard que je consulte cette page!!

je vous remercie de vos reponses, je traiterai ca demain au travail et vous tiens au courant.

MErci encore une fois

[redah75]

Bonjour a tous,

Avec les pseudo class :focus et :target ?
http://www.w3.org/TR/CSS2/selector.h...pseudo-classes

ehh non, le focus ne marche pas!!

voici mon code:

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
<style type="text/css">
input.test {
	width: 300px;
	border: 1px solid #444444;
}
 
input.test:hover {
	border: 2px solid #444444;
}
 
input.test:focus {
	border: 2px solid #444444;
	background-color:#99CCFF;
}
</style>
 
<input type="text" class="test" />

auriez vous des idees???
Merci