CSS & Javascript

Version imprimable

03/03/2009, 18h42
redah75

CSS & Javascript

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:

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

mais je souhaiterai le faire de cette maniere:

Code:

<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
03/03/2009, 18h52
Ethyde

Avec les pseudo class :focus et :target ?

http://www.w3.org/TR/CSS2/selector.h...pseudo-classes
03/03/2009, 21h12
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 ?

-

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:

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:

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:

1 2 <a href="http://www.monsite.com" class="exterieur" >mon site </a>
et dans ton fichier js
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 // 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.

04/03/2009, 20h12
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 :)

Bonjour a tous,

Citation:

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:

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

pas d'autres choix que de passer par le js alors essayes de faire un fichier js externe avec, en gros:

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
 
onload = chargement;
 
function chargement()
{
 var lesInput = document.getElementsByTagName('input');
 var longueur = lesInput.length;
 for( i = 0; i < longueur; i++)
 {
   if(lesInput[i].className.indexOf('test') > -1 )
   {
      lesInput[i].onfocus = fonction1;
      lesInput[i].onblur = fonction2;
   }
 }
}
 
function fonction1()
{
  this.style.backgroundColor ='#FF0000';
}
 
function fonction2()
{
  this.style.backgroundColor ='#FFFFFF';
}

05/03/2009, 17h23
redah75

c'est vraiment pas possible de tout faire en CSS?? :((
on parle sur plein de site du input:focus mais ca n'a pas l'air de fonctionner sur IE7!!