Bug Firefox sur focus()

Version imprimable

Bonjour !
J'ai un petit bug sur firefox quand j'utilise la fonction focus (ou select).
En fait, quand je clique sur un bouton, j'affiche une div au milieu de la page (un peu comme une popup en gros, sauf que ça reste dans la page) avec un champ texte dedans auquel je donne le focus. Sous IE ça marche bien, mais sous FF le curseur (la petite barre qui clignote permettant de savoir où on écrit) ne s'affiche pas alors que le champ a bien le focus vu que si je tape quelquechose ça s'écrit bien dans le champ texte...
Je voudrais donc savoir comment y remédier ?

Ma fonction javascript permettant de faire ça :
Code:

1 2 3 4 5 6 7 8 function afficherDialog() { dialog.init(); // créé la dialog, la positionne au milieu de la page et initialise son contenu dialog.afficher(); // rend visible la dialog var champTexte = dialog.getContenu('champTexte'); champTexte.onkeydown = toucheEntree; // valide le formulaire si on appui sur entrée champTexte.focus(); champTexte.select(); };
Merci d'avance !

01/02/2007, 14h26
dam_moreyllo

Personne n'a une idée ni même une petite piste ?
Vous faut-il plus de précision ?

Quelle version de FF utilises-tu?

Pour ma part, je n'ai pas ce problème et je suis sous la 1.5.0.9.

Je viens de tenter avec un exemple bidon:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<html>
   <head>
   </head>
   <body>
      <div id="moo" style="visibility: hidden; display: none; position: absolute; width: 200px; height: 200px; border: 1px solid black; left: 300px;">
         <input id="foo" type="text" />
      </div>
 
      <input type="button" onclick="doMoo();" />
 
      <script type="text/javascript">
      function doMoo() { 
         document.getElementById('moo').style.visibility = 'visible';
         document.getElementById('moo').style.display = 'block';
         document.getElementById('foo').focus();
      }
      </script>
   </body>
</html>

Sinon, c'est peut-être un bug d'affichage de layers qui n'a rien à voir avec Javascript...

02/02/2007, 10h12
dam_moreyllo
Citation:

Quelle version de FF utilises-tu?

2.0.0.1, mais il semble me rappeler que ça me le faisait déjà sur la 1.5

Citation:

Je viens de tenter avec un exemple bidon:

J'ai essayé aussi ton exemple et ça marche bien chez moi aussi...

J'avais le même problème (curseur qui disparait) quand je faisais ça par exemple :
Code:

1 2 3 4 5 6 7 8 <html> <head> </head> <body> <input id="foo" type="text" onblur="document.getElementById('bar').focus();" /> <input id="bar" type="text" /> </body> </html>
En fait j'avais pas remarqué, mais même si je ne donne pas le focus au champs, quand clique sur le champ pour lui donner le focus ben ça fait pareil...

C'est bizarre quand même...
02/02/2007, 10h24
E.Bzz

Bonjour,
tu n'aurais pas dans la même page un script en tache de fond (style onmousemove) ?
Ca peut perturber le clignotement du curseur ...

A+
02/02/2007, 10h45
dam_moreyllo

onmousemove non j'en ai pas.
Par contre j'ai pleins de onload, onresize, onclick, onmouseover/out et onkeyup/down. Normalement c'est tout...

Je déplace mon édit du post d'avant au cas ou :
Est-ce que le bug pourrais venir du fait que mon bouton, qui affiche la div et donne le focus au champs texte, se trouve dans une frame qui elle même se trouve dans une iframe (oui je sais c'est compliqué mais c'est plutôt une application que je développe) alors que la div se trouve dans la page globale ?
02/02/2007, 10h51
E.Bzz

Citation:

Envoyé par ptitskippy

Est-ce que le bug pourrais venir du fait que mon bouton, qui affiche la div et donne le focus au champs texte, se trouve dans une frame qui elle même se trouve dans une iframe (oui je sais c'est compliqué mais c'est plutôt une application que je développe) alors que la div se trouve dans la page globale ?

Ben dans les scripts de l'iframe qui accède à la page parente, il faut préfixer les commandes par "parent." ou "top." (NS)

Code:

parent.document.getElementById(...

A+
02/02/2007, 10h56
dam_moreyllo

Bah bien sur t'inquiète pas ;) sinon ça m'aurait fait une erreur javascript et pas un bug d'affichage !
D'ailleurs la fonction dialog.getContenu sert justement de raccourci pour faire ce que tu dit.
02/02/2007, 10h58
E.Bzz

Heu ... pourquoi l'edit précédent, alors ??
02/02/2007, 11h05
dam_moreyllo

Ben je sais pas trop... peut être que le fait d'une frame demande à sa frame parente d'afficher un champs texte cause un bug sous FF...
J'essaie d'envisager toutes les possibilités parce que je commence à ne plus avoir d'idées de la où vient le problème...
02/02/2007, 11h09
E.Bzz

dialog.getContenu gère aussi les parent.parent.... ?
02/02/2007, 11h14
dam_moreyllo

Pas exactement. En fait la définition de l'objet dialog se trouve dans un script de la page globale (car elle peut appelée par une autre frame que celle qui nous interesse).
Et au début de la fonction que j'ai donné, je fait (je l'avais enlevé pour pas compliqué l'exemple) :

Code:

var dialog = parent.parent.dialog;

du coup la fonction getContenu retourne un simple document.get... car elle se trouve dans la page globale.
C'est à peu près clair mes explications... ? :oops:
02/02/2007, 11h28
E.Bzz

Citation:

Envoyé par ptitskippy

C'est à peu près clair mes explications... ? :oops:

Le fonctionnement, je sais pas, mais les explications, oui :)
02/02/2007, 11h59
dam_moreyllo

Bon euh à mon avis ça sert à rien de continuer parce que mon application est un peu trop compliquée à expliquer (j'ai 9 fichiers javascript pour un total de 53Ko...) donc je vais me débrouiller tout seul...
Merci quand même à vous d'eux d'avoir essayé de m'aider !!
02/02/2007, 13h33
freekind

Citation:

Est-ce que le bug pourrais venir du fait que mon bouton, qui affiche la div et donne le focus au champs texte, se trouve dans une frame qui elle même se trouve dans une iframe...

Si je comprends bien, tu ouvres un layer qui contient une iframe. Ton iframe donne accès à un document qui contient un nouveau frame (ou nouveau iframe?)

J'avais déjà tenté quelque chose du genre jadis... une iframe dans une iframe dans un layer, ça faisait littéralement planter firefox. ;-) Soit un coup de malchance de ma part, soit le browser supportait mal le tout pour la version du temps...

Sinon, j'ai fait un essai semblable dans une iframe, dans un layer (un niveau de moins...) et tout baigne. J'ai des "pseudo-processus" qui roulent par setInterval et plusieurs autres événements associés à divers éléments appelés (qui eux sont superposés au layer en question...)

Si ton code est si complexe, je te suggère
1) de simplifier une copie de ton code - en retirant tout ce qui n'est pas nécessaire - jusqu'à ce que tu isoles le cas en question;
2) si, en 1, tu n'arrives à aucun résultat concret, de tester sur une autre machine ayant des composantes matérielles différentes le comportement du script (pourquoi pas après tout! ;) )
3) si tu n'arrives vraiment pas à résoudre ton problème, de surligner les champs qui sont présentement sous focus en modifiant la couleur de fond ou encore la taille de la bordure de tes input ayant le focus. Ton utilisateur saura alors où il se trouve, que le curseur clignote ou non.
02/02/2007, 14h07
dam_moreyllo

Bon pour la disposition en fait j'ai dans la page globale :
- un div en haut de 20px de hauteur
- une iframe que je redimensionne sur le onresize de la fenêtre pour prendre toute la page moins la taille des 2 divs au dessus et en dessous
- un div en bas (un peu comme une barre d'état en fait) de 20px aussi

plus :
- un div en position absolue avec top et left à 0px, width et heigth à 100%, une couleur de fond avec une opacité de 20% et un z-index de 996.
- un div en position absolue et un z-index de 997.
le premier div sert d'arrière plan à la seconde pour éviter que la personne clique sur autre chose que la seconde div. La seconde div, c'est la dialog ! (à noter que ces 2 divs sont ajoutées en javascript et qu'il y aussi 2 autres divs qui me permettent d'afficher un message d'erreur sur le même principe sauf qu'elles ont un z-index de 998 et 999)

Ensuite dans mon iframe j'ai une page qui contient un frameset qui est composé de 2 frames. J'ai fais comme ça pour qu'on puisse redimensionner ces 2 frames avec la bordure entre les 2.

Et donc dans chacune de ces 2 frames, j'ai une petite barre d'outils avec notamment le fameux bouton qui permet de renommer une valeur dans la frame correspondante. C'est ce bouton qui ouvre la dialog qui contient un seul champs texte et où j'ai le problème d'affichage du curseur.

Voila en gros comment est présentée mon application.

Citation:

tu ouvres un layer

C'est quoi que tu appel layer ? une dialog ?

Citation:

1) de simplifier une copie de ton code - en retirant tout ce qui n'est pas nécessaire - jusqu'à ce que tu isoles le cas en question;

J'ai essayé une fois et le problème était résolu mais pas réussi à trouver ce qui clochais... et ça m'a découragé de faire comme ça...

Citation:

2) si, en 1, tu n'arrives à aucun résultat concret, de tester sur une autre machine ayant des composantes matérielles différentes le comportement du script (pourquoi pas après tout! )

Je vais essayer pour voir

Citation:

3) si tu n'arrives vraiment pas à résoudre ton problème, de surligner les champs qui sont présentement sous focus en modifiant la couleur de fond ou encore la taille de la bordure de tes input ayant le focus. Ton utilisateur saura alors où il se trouve, que le curseur clignote ou non.

Comme je l'ai dit, je n'ai qu'un seul champ texte, du coup je peux pas faire ça. Et puis ça ne résoudrais pas entièrement le problème.
Imagine : le curseur ne se voit donc pas. Tu tape mettons 15 lettres puis tu remarque qu'a la 6è t'en a oublié une. Puisque le curseur ne s'affiche pas, il faut par exemple que tu compte le nombre de fois à appuyer sur la touche gauche pour savoir où est-ce que tu es. Enfin bref c'est vraiment pas pratique !
02/02/2007, 15h28
dam_moreyllo

Bon vu que ça m'énerve j'ai réfléchis à une autre méthode et ça pose pas de problème à priori.
Donc on va dire résolu...
Merci à tous.