Problème focus sous IE

Résolu
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 - 6 nov. 2006 à 10:11
 cs_caloga - 7 sept. 2007 à 07:48
Bonjour,

Je n'ai pas trouvé de réponses sur le web et ici, donc je pose ma question

J'ai une fonction javascript qui m'affiche un champ input de type text dans des cellules de tableau quand je double-clique dessus.
Le problème est que je n'arrive pas à donner le focus au champ text une fois qu'il est créé. Sous Firefox ça marche très bien, mais pas sous IE, je vous mets le code de ma fonction javascript :

function changeEtatCase(cellule)
{
       element = cellule; //On récupère la cellule qui a été double-cliquée
       element.innerHTML = ''; //Affichage d'un champ text pour la saisie
       document.getElementById('saisie').focus(); //On donne le focus à ce champ text
}
Voilà, merci d'avance !!

23 réponses

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
6 nov. 2006 à 12:28
Bonjour,
   avec IE, j'ai l'impression que le focus arrive avant que l'input ne soit créé ???



function changeEtatCase(cellule)
{
   var identifiant = 'saisie' + nbLignes;
   element = cellule; //On récupère la cellule qui a été double-cliquée
   element.innerHTML = ''; //Affichage d'un champ text pour la saisie


   document.getElementById(identifiant).select(); // ajouter ? par exemple ?



   document.getElementById(identifiant).focus(); //On donne le focus à ce champ text
   nbLignes ++;
}   



   ça devrait le faire...
   mais je dis peut-être des bétises...

<hr />
                              Cordialement             Bul       [
mon Site
]    [
=Bul
M'écrire

]
<hr />
3
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
6 nov. 2006 à 20:06
B

onjour...


j'arrives un peu tard mais je confirme ayant eu le même problème avec IE notamment...
il peut s'écouler un certain temps avant la création réellement réellel de l'élément...

//---------------------
function SetFocus( el_){
  var Obj =  document.getElementById( el_);
  if( Obj)
    Obj.focus();
  else
    setTimeout("SetFocus('"+ el_+"')",20);
}

;0)
3
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
6 nov. 2006 à 10:29
Bonjour,
   aucun souci avec IE ?
   dans la mesure où l'appel est du style : ...<td onclick="changeEtatCase(this);">...
   et où on ne créé qu'un seul input text id="saisie" , mais là, FF devrait planter aussi.
<hr />
                        Cordialement             Bul       [mon Site]    [M'écrire]
<hr />
0
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 1
6 nov. 2006 à 10:34
Et bien, sous Firefox ça plante pas du tout, ça marche très bien, même avec plusieurs champ input (enfin ils sont créés, et juste après la saisie n'existent plus), mais sous IE ça ne fonctionne pas du tout.
Sinon l'appel de la fonction se fait bien comme tu l'as dis.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 1
6 nov. 2006 à 10:48
Je me suis dis que ça venait sûrement du fait que j'utilisais le même id plusieurs fois (malgré que le champ n'existe plus après chaque saisie), mais non. J'ai testé en mettant un identifiant différent à chaque fois, ça ne change rien : sous firefox c'est parfait, sous ie, jamais  de focus !!
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
6 nov. 2006 à 11:01
aucun souci comme çà :

<HTML Lang="fr">
<HEAD>
<TITLE></TITLE>
<Script type="Text/JavaScript">
function afficheSaisie(v,e)
{
 alert(v+"\r\n"+e);
}
function changeEtatCase(cellule)
{
       element = cellule; //On récupère la cellule qui a été double-cliquée
       element.innerHTML = ''; //Affichage d'un champ text pour la saisie
       document.getElementById("saisie").focus(); //On donne le focus à ce champ text
}
</Script>
</HEAD>

 ----
exemple

</HTML>

   essayer.
   donc ? le problème est ailleurs ?
               tu ne fait tout à fait comme ci-dessus ?
               ....

<hr />
                        Cordialement       Bul       [mon Site] [M'écrire]
<hr />
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
6 nov. 2006 à 11:03
précision : un ID doit être unique, à un moment donné, bien entendu, dans une page.   
<hr />
                        Cordialement       Bul       [mon Site] [M'écrire]
<hr />
0
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 1
6 nov. 2006 à 11:08
Et bien je pense pas voir de différence :

Là ma ligne créée en php :
echo '<TR id="'.substr($cle,7).'"><TD>'.$elt['designation'].'</TD><TD>'.$elt['qteCommandee'].'</TD><TD headers="qtePosee" ondblClick="javascript:changeEtatCase(this);">'.$qtePosee.'</TD><TD>'.$elt['prixUnitaireHT'].'</TD><TD>'.$prixHTCalcule.'</TD><TD headers="fte" ondblClick="javascript:changeEtatCase(this);">'.$fte.'</TD><TD headers="totalFTE">'.round($totalCalcule,2).'</TD></TR>';
Je viens de remarque que ma fonction devait sûrement écraser mon input hidden puisque je fais :
element.innerHTML = '';
Le problème c'est que ce n'est pas le cas !! (je comprend plus tout là )
0
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 1
6 nov. 2006 à 11:08
(Même en mettant un id unique à chaque fois, ça ne change rien ...)
0
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 1
6 nov. 2006 à 11:14
Bon, finalement mon champ caché, je ne l'écrase pas, car je le recrée plus tard dans une autre fonction. Donc je ne vois pas de différence avec toi, je ne comprends pas ...
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
6 nov. 2006 à 11:26
Bonjour,
   tu ne peux pas faire un extrait de la page HTML ?
      avec uniquement ( mais tous ! ) les éléments en jeu ?

   pas le php ! on ne sait pas ce qu'il y a dans les variables...

   à partir de ta page générée, extrait uniquement l'équivalent
      de mon exemple, et tester.

   si ça ne marche pas : nous donner cet extrait.
   si ça marche : l'erreur vient d'ailleurs.
<hr />
                           Cordialement Bul [mon Site] [M'écrire]
<hr />
0
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 1
6 nov. 2006 à 11:53
Bon ça ne marche pas, j'ai extrait ce que tu as demandé (si j'ai bien compris), et le code source donne :
..........
   
        <SCRIPT language="javascript1.3">
            var focusMenu = 0;//on déclare la variable qui contiendra le numéro de la case du menu devant avoir le focus
            var nbLignes = 0;
            var montantCalcule = 0;
           
            function afficheSaisie(valeur,cellule)
            {
                // Fonction qui va afficher la valeur saisie et recalculer les champs qui sont affectés par ce changement :
               
                var cpt = 0;
                montantCalcule = 0; //montant total hors taxe

                if(cellule.headers=="qtePosee")
                {
                    //Si la cellule cliquée est une cellule de la colonne quantité posée :
                   
                    //On affiche la valeur saisie et un champ caché contenant cette valeur pour l'enregistrer par la suite via la méthode post :
                    cellule.innerHTML = '' + valeur;
                       
                    //On recalcule le prix total de revient hors taxe et on l'affiche :
                    document.getElementById('tabFacture').rows[cellule.parentNode.rowIndex].cells[4].innerHTML = (valeur * document.getElementById('tabFacture').rows[cellule.parentNode.rowIndex].cells[3].innerHTML).toFixed(2);
                   
                    if(document.getElementById('tabFacture').rows[cellule.parentNode.rowIndex].cells[5].innerHTML.substr(document.getElementById('tabFacture').rows[cellule.parentNode.rowIndex].cells[5].innerHTML.lastIndexOf(">") + 1)!='')
                    {
                        //Si un pourcentage de facturation pour la ligne de l'article correspondant a été spécifié, on recalcule le montant total à facturer pour l'article et on l'affiche :
                        document.getElementById('tabFacture').rows[cellule.parentNode.rowIndex].cells[6].innerHTML = (parseFloat((document.getElementById('tabFacture').rows[cellule.parentNode.rowIndex].cells[5].innerHTML.substr(document.getElementById('tabFacture').rows[cellule.parentNode.rowIndex].cells[5].innerHTML.lastIndexOf(">") + 1))/100) * document.getElementById('tabFacture').rows[cellule.parentNode.rowIndex].cells[4].innerHTML).toFixed(2);
                    }
                }
                else if(cellule.headers=="fte")
                {
                    //Si la case que l'on vient de modifier est une case de pourcentage à facturer, alors on enregistre la valeur saisie dans cette case et dans un champ caché pour 'lenregistrement plus tard dans la base de données :
                    cellule.innerHTML = '' + valeur;
                    //On recalcule le montant total hors taxe à facturer pour cet article :
                    document.getElementById('tabFacture').rows[cellule.parentNode.rowIndex].cells[6].innerHTML = ((valeur/100) * document.getElementById('tabFacture').rows[cellule.parentNode.rowIndex].cells[4].innerHTML).toFixed(2);
                }
            }
           
            function changeEtatCase(cellule)
            {
                var identifiant = 'saisie' + nbLignes;
                element = cellule; //On récupère la cellule qui a été double-cliquée
                element.innerHTML = ''; //Affichage d'un champ text pour la saisie
                document.getElementById(identifiant).focus(); //On donne le focus à ce champ text
                nbLignes ++;
            }
        </SCRIPT>
       

            Situation n° 1 :

            <form name="formSituation" method="post" action="traiteSituation.php">
                                            ----
Désignation des ouvrages |Qte |Qte
posée
|P.U.HT
?
|P.T.H.T
?
|%
Fté
|TOTAL
FTE ?
|
                          ----
Montant HT Marché :  ?, ----
A. châssis 1 Vtl 900*1600 + VR -29db, 23, , 279.87, , , 0,
               

               
            </form>      
        

   
</HTML>
0
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 1
6 nov. 2006 à 13:28
Ah c'est parfait Ca marche niquel. Je connaissais pas le select comme ça.

Merci beaucoup de tes réponses rapides et efficaces
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
6 nov. 2006 à 15:34
c'est parfait... sauf que, avec mon exemple ça fonctionnait, et pas ici...
il y a quelque chose qui m'échappe... je ne vois pas de raisons et je n'aime pas ça.
<hr />
                              Cordialement             Bul       [mon Site]    [M'écrire]
<hr />

résoudre sans comprendre ce n'est guère mieux que comprendre sans résoudre.
0
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 1
6 nov. 2006 à 15:57
Ben le select ça peut aussi correspondre à ce que je veux (une sorte de focus quoi), non ? Pour moi ça revenait un peu au même pour un champ de type text.
En tout cas, le select marche ici ... Pourquoi avant ça ne marchait pas ?? Je ne sais pas, j'arrive pas à trouver et ça m'agace de passer du temps sur un si petit truc alors que ça aurait dû fonctionner !! Je vois rien dans mon code qui pourrait interagir ...
Sur le web, j'ai trouvé quelqu'un qui disait qu'il fallait un peu de temps à IE pour mettre le focus sur l'élément, c'est pour cela que lui faisait une pause de quelques secondes, et ensuite mettait le focus sur l'input text (si je me trompes pas !).
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
6 nov. 2006 à 16:05
je pensais que IE allait trop vite !
le .focus() est lancé avant que l'input ne soit créé.
le .select() permet un tout petit délai.            guère satisfaisant...

d'autres intervenants plus compétents nous diront peut-être ?
<hr />
                              Cordialement             Bul       [mon Site]    [M'écrire]
<hr />
0
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 1
6 nov. 2006 à 16:17
J'ai peut-être mal compris ce que voulais dire la personne (elle avait carrément une exception) :
"Sous Internet Explorer, il faut laisser le navigateur respirer avant de trouver le champ pour lui donner le focus : setTimeout(function(){$('saisie').focus();},100);"
0
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 1
6 nov. 2006 à 16:20
Donc dans mon cas ça donne dans ma fonction :

setTimeout(function(){document.getElementById('saisie').focus();},100);

Et ça marche. C'est sûrement ça qu'il fallait faire ...
0
cs_chamallow Messages postés 363 Date d'inscription mercredi 18 mai 2005 Statut Membre Dernière intervention 29 janvier 2007 1
7 nov. 2006 à 08:04
Merci pour la confirmation

Et merci à vous deux pour vos réponses, maintenant ça marche, donc c'est cool !! Et puis je le saurais pour la prochaine fois
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
7 nov. 2006 à 08:24
salut PetoleTeam,

      il n'ai jamais trop tard pour bien faire....

   je n'avais jamais eu ce souci...?!?
   et à ton avis, pourquoi ci-dessous ça baigne ?

<HTML Lang="fr">
<HEAD>
<Script type="Text/JavaScript">
function changeEtatCase(cellule)
{
 cellule.innerHTML = '';
 document.getElementById("saisie").focus();
}
</Script>
</HEAD>

 ----
exemple

</HTML>

   enfin... chez moi ( XP, IE 7 )
   pas d'énormes différences avec ce que fait chamallow ?

<hr />
                              Cordialement             Bul       [mon Site]    [M'écrire]
<hr />
0
Rejoignez-nous