ajouter un événement onfocus à un champ input

ajouter un événement onfocus à un champ input - HTML/CSS - Programmation

Marsh Posté le 09-03-2006 à 10:35:06    

Salut à tous. Je suis en train de développer une application web en html php javascript et j'aurais besoin à un moment donné de changer ou d'ajouter un événement onFocus à un champ input text.
 
Je m'explique, j'ai un script qui liste le contenu d'une base de données, et l'utilisateur doit pouvoir modifier ou supprimer une ligne.
Lorsqu'il choisit de supprimer ou de modifier une ligne, il clique sur un bouton radio et un formulaire de saisie se remplit avec les valeurs correspondantes.
Seulement voila, si l'action est "supprimer" j'aimerai que les champs text ne soient plus modifiables.
 
J'ai essayé plusieurs trucs genre : form.elements[i].onFocus = "this.blur()"; ou alors form.elements[i].readOnly = true;
et qq trucs comme ça mais rien n'y fait.
 
Après qq recherches sur le net, j'ai tjr rien trouvé :(.
 
Qqun aurait une solution ?
Merci d'avance.

Reply

Marsh Posté le 09-03-2006 à 10:35:06   

Reply

Marsh Posté le 13-03-2006 à 09:31:24    

Dois-je en déduire que personne ne peut m'aider ? :cry:

Reply

Marsh Posté le 13-03-2006 à 09:52:54    

la syntaxe (enfin une des pour etre exacte) pour changer un evement est la suivante:

Code :
  1. tonElement.unEvenement = function(event) {taFonction;};


avec unEvenement qui peut valoir onload, onclick, onmouseup, onmousedown, onblur ...
Tu as d'autres syntaxes, notamment avec attachEvent, celle du dessus à l'avantage de marcher sur a peu près tous les navigateurs.
 
Par ailleurs, quand tu commences a faire des trucs comme ça ( et particulierement une "application web" ), je te déconseille d'utiliser la "vieille syntaxte" javascript à base de form.elements...
Renseigne toi sur les fonction DOM, tu verras c'est bien plus pratique!!!

Reply

Marsh Posté le 13-03-2006 à 14:13:10    

j'ai tenté ceci mais ça sonnait faux, enfin ça me paraissait bizarre et effectivement ça ne marche pas...

Code :
  1. form.elements[i].onFocus = enleverFocus(form.elements[i])


sachant que :

Code :
  1. function enleverFocus(field){
  2.     field.blur();
  3. }


Sinon qqun aurait de bonnes sources de renseignements sur le DOM ?

Reply

Marsh Posté le 13-03-2006 à 14:23:08    

naaaan t'as po compris :o

Code :
  1. form.elements[i].onFocus = function(event){ enleverFocus(this);}


tu peux passer this comme argument car au moment de l'appel de la fonction ( donc dans le onFocus) this pointera sur l'objet qui vient d'être onfocuser ( si ça existe comme mot).
 
Tu trouveras plein de renseignements sur pleins de site sur le dom.
la présentation sur le site developer.mozilla.org est pas mal.
Tu trouveras aussi quelques exemples assez clairs.
Après le DOM est "censé" être un standard implémenté de la même façon sur tous les navigateurs, fais attention il y a quand même quelques subtiles nuances.
 
Enfin:

chrisbk a écrit :

DOM1 est un autre jour

Reply

Marsh Posté le 15-03-2006 à 14:24:51    

Citation :


Code :
  1. form.elements[i].onFocus = function(event){ enleverFocus(this);}




j'ai beau essayer ça ne marche pas...

Reply

Marsh Posté le 15-03-2006 à 15:08:45    

boulette de ma part :o pas de F majuscule dans le onfocus !!!

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Test</title>
  7.   <script type="text/javascript">
  8.   function chgFocus(){
  9.     input = document.getElementById('inp') ;
  10.     if ( input.onfocus == null){
  11.       input.onfocus = function(event){ doIt();};
  12.     } else {
  13.       input.onfocus = null;
  14.     }
  15.   }
  16.   function doIt(){
  17.     alert('pouet');
  18.   }
  19.   </script>
  20. </head>
  21. <body >
  22. <input type="text" id="inp"/>
  23. <br/>
  24. <input type="button" value="add/remove focus" onclick="chgFocus()"/>
  25. </body>
  26. </html>

Reply

Marsh Posté le 16-03-2006 à 09:25:11    

Bon ben j'ai essayé ça :

Code :
  1. function enleverFocus(field){
  2. field.blur();
  3. }


 
pour ça :

Code :
  1. form.elements[i].onfocus = function(event){ enleverFocus(this);}


Mais comme ça ne marchait pas j'ai essayé moins compliqué, j'ai fait comme toi précédemment (plus ou moins) :

Code :
  1. function doIt(){
  2. alert("pouët !" );
  3. }


et plus loin :  

Code :
  1. form.elements[i].onfocus = function(event){ doIt();}


 
et en fait ben ça marche pas non plus :'C...


Message édité par Yertle le 16-03-2006 à 09:25:55
Reply

Marsh Posté le 16-03-2006 à 09:57:01    

le code que je t'ai donné je l'ai vérifié sur IE/FF garanti il marche!!!
 
Mais je pense que c'est l'utilisation de

Code :
  1. form.elements[i]

qui suxe...
 
Utilise plutot les fonctions DOM:

Code :
  1. document.getElementById

Reply

Marsh Posté le 16-03-2006 à 13:55:37    

J'ai éclairci mon code, et en fait j'ai trouvé une erreur dans la console de la barre d'outils développeur FF :  
 

Citation :

Erreur : [Exception... "'Permission refusée de modifier la propriété XULElement.selectedIndex' when calling method: [nsIAutoCompletePopup::selectedIndex]"  nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)"  location: "JS frame :: http://b8183/niko/code/appli/manip [...] 2110&gra1= :: enleverFocus :: line 75"  data: no]
Fichier source : http://b8183/niko/code/appli/manip [...] 2110&gra1=
Ligne : 75


 
voici la ligne concernée :

Code :
  1. function enleverFocus(input){
  2. input.onfocus = input.blur();
  3. }


 
j'ai aussi essayé avec ceci, avec ou sans quotes, mais même résultat :

Code :
  1. function enleverFocus(input){
  2. input.onfocus = this.blur();
  3. }

Reply

Marsh Posté le 16-03-2006 à 13:55:37   

Reply

Marsh Posté le 16-03-2006 à 13:57:46    

Pour que tu comprennes mieux la globalité voici les fonction entières, en espérant que ça ne soit pas trop long (toute la fonction n'est pas utile a connaître...)

Code :
  1. function enleverFocus(input){
  2. input.onfocus = input.blur();
  3. }
  5. //rempli les champs du formulaire correspondant à la case cochée, les vide si la case en question est décochée
  6. function remplirChamps(form,id,uf,mon,act){
  7. var ecrit = 0; //booleen : 0 si champs non remplis, 1 si oui
  8. var j = 0;
  9. //vérifie si déja écrit
  10. while(j<form.length && ecrit == 0){
  11.  if((form.elements[j].type=='text') && ((form.elements[j].name.substring(0,3) == "ide" ) && (form.elements[j].value==id))){
  12.   ecrit = 1;
  13.  }
  14.  j++;
  15. }
  16. if (ecrit == 0){ //si la ligne n'est pas déja écrite
  17.  j = 1;
  18.  var actionencours = "new";
  19.  for (var i=0 ; i<form.length ; i++){ //parcours total sur le formulaire passé en param
  20.   if(form.elements[i].type == 'text'){ //on cherche un champ texte
  21.    //dont le nom commence par "ide" et qui n'est pas déja rempli
  22.    if (form.elements[i].name.substring(0,3) == "ide" && form.elements[i].value == ''){
  23.     //on rempli les champs avec les valeur paramètres
  24.     form.elements[i].value = id;
  25.     i++;
  26.     form.elements[i].value = uf;
  27.     i++;
  28.     form.elements[i].value = mon;
  29.     i++;
  30.     form.elements[i].value = act;
  31.     ecrit = 1;
  32.     break; //les données sont écrite, on arrête le parcours du formulaire
  33.    }
  34.   }
  35.  }
  36. }else{ //si les données sont déja entrées
  37.  actionencours = form.elements[j+3].value; //récupère dans le champs concerné l'action en cours
  38. }
  39. if (ecrit == 0){ //si les données n'ont pas été écrite, on a parcouru le formulaire sans trouvé de champs "ide" vide
  40.  ajoutChamps(champsaisie,'divchampsaisie'); //on rajoute des lignes dans le formulaire
  41.  remplirChamps(form,id,uf,mon,act); //on recommence le remplissage
  42. }else{ //si les données on été écrite, on change le style des input selon l'action choisie
  43.  if (actionencours != act){ //si l'action entrée est différente de l'action en cours
  44.   if (act == "modif" ){ //et que c'est une modification
  45.    for (var i=j ; i<=j+2 ; i++){ //on parcour la ligne et on change le style pour chaque champ
  46.     form.elements[i].style.backgroundColor  = "cyan";
  47.     form.elements[i].style.color  = "black";
  48.     form.elements[i].onfocus = null;
  49.    }
  50.   }else{ //si c'est une suppression
  51.    for (var i=j ; i<=j+2 ; i++){ //on parcour la ligne et on change le style pour chaque champ
  52.     form.elements[i].style.backgroundColor  = "yellow";
  53.     form.elements[i].style.color  = "black";
  54.     form.elements[i].onfocus = function(event){ enleverFocus(this); };
  55.    }
  56.   }
  57.   // form.elements[j+3].value = act; //on modifie l'action
  58.  } //si l'action est la même on ne fait rien
  59. }
  60. }

Reply

Marsh Posté le 16-03-2006 à 14:23:21    

ta fonction enleverFocus elle est pas bonne!

Code :
  1. function enleverFocus(input){
  2.    input.blur();
  3. }


Bon par ailleurs c'est completement stupide de faire un onfocus -> blur, ça veut dire que tu veux pas que le champs puisse être saisi, alors autant le mettre en disabled ou read-only.
 
Enfin si tu tiens vraiment a garder ton truc comme ça, envoie tout le code de ta page parce que là j'ai du mal a inventer le formulaire qui va avec ;)

Reply

Marsh Posté le 16-03-2006 à 15:48:35    

Alors j'ai essayé d'inclure le code correspondant et nécessaire à la compréhension du pbm, mais apparemment il est tout de même trop important le post ne fontcionne pas.  :heink:  
 
Alors pour t'expliquer vite fait, j'ai un ensemble de lignes, je donne le choix soit de les supprimer soit de les modifer, ceci dit le script fonctionne par groupe de lignes, ce qui veut dire que pour les lignes choisies, je conserve l'action correspondante dans un champ caché. Et là pour différencier les champs suppr ou les champs modif, je change la couleur, et j'empêche l'utilisateur de faire des modifs sur les lignes qu'il désire suppr.
Un champs doit donc pouvoir passer de readOnly a read et write lorsque je change l'action désirée.
 
Ceci dit, il est vrai qu'un champ en readOnly à la place d'un onFocus="this.blur()" est bien plus pratique et plus approprié. Mais je ne sait pas non plus cmt est-ce qu'on affecte le readOnly a un champ.
J'ai essayé ça :

Code :
  1. form.elements[i].readOnly = true;

mais ça ne marche pas...

Message cité 1 fois
Reply

Marsh Posté le 16-03-2006 à 15:50:34    

Tiens j'ai remplacé ma fonction enleverFocus() par la tienne, et ça marche, pourtant j'ai tjr la même erreur dans la console.

Message cité 1 fois
Reply

Marsh Posté le 16-03-2006 à 16:03:18    

Yertle a écrit :

... un gros paté que je comprends pas


T'as pas un lien dessus ça irait plus vite :o
 

Yertle a écrit :

Ceci dit, il est vrai qu'un champ en readOnly à la place d'un onFocus="this.blur()" est bien plus pratique et plus approprié. Mais je ne sait pas non plus cmt est-ce qu'on affecte le readOnly a un champ.
J'ai essayé ça :

Code :
  1. form.elements[i].readOnly = true;

mais ça ne marche pas...


Tiens ça ça marche t'as qu'a t'en inspirer:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Test</title>
  7.   <script type="text/javascript">
  8.   function chgRO(){
  9.     input = document.getElementById('inp') ;
  10.     if ( input.readOnly == false){
  11.       input.readOnly = true;
  12.     } else {
  13.       input.readOnly = false;
  14.     }
  15.   }
  16.   </script>
  17. </head>
  18. <body >
  19. <input type="text" id="inp"/>
  20. <br/>
  21. <input type="button" value="add/remove readOnly" onclick="chgRO()"/>
  22. </body>
  23. </html>


 

Yertle a écrit :

Tiens j'ai remplacé ma fonction enleverFocus() par la tienne, et ça marche, pourtant j'ai tjr la même erreur dans la console.


C'est que l'erreur est dans le reste de ton code!!!
 
Mais honnetement tu gagnerais beaucoup en lisibilité à te servir des fonctions dom getElementById et getElementsByTagName
 

Reply

Marsh Posté le 17-03-2006 à 09:25:53    

Citation :

...l'erreur est dans le reste de ton code


Non, l'erreur est bien sur le changement de onFocus, la console de debug me renvoie à cette ligne précisément.
 
Pour les fonctions DOM, je ne peux pas les utiliser paske je doit parcourir un formulaire dans son intégralité, et non un champ en particulier, je ne peux donc pas utiliser leur id on tag pour les repérer (d'ailleurs la console ne me donne ni erreur ni warning lors des parcours des formulaires alors qu'elle m'en donnait à d'autres endroits où là les getElementById était obligatoires pour rester dans les standards).
 
Pour finir, je te remercie pronfondément paske je viens grâce à toi de résoudre le pbm avec des readOnly, tout marche et sans erreur :wahoo:  
 
Merci pour ton aide et ta patience et à bientot peut être  :p

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed