javascript focus() ne fonctionne pas sur Firefox et IE?

Question

J'essaie d'apparaître un formulaire et le concentrer, pour une raison quelconque, il ne fonctionne que sur Chrome. Comment puis-je le faire fonctionner à travers les navigateurs?

<script> 
function SearchCity(evt){ 
    document.getElementById('ciudad-eq').style.display='none'; 
    document.getElementById('buscarciudad').style.display='inline'; 
    document.getElementById("city").focus(); 
} 
</script>  


    <div onclick="SearchCity(event)" id="ciudad-eq" style="cursor: pointer;"> 
    Not from Miami? 
    </div> 

    <div id="buscarciudad" style="display: none;"> 
     <form role="search" method="post" id="searchform" action="insert/insert-ip.php"> 
      <input type="text" id="city" name="ciudad" value="¿Cual es tu ciudad?" style="width: 140px;" > 
      <input type="submit" value="ir" style="padding: 2px 6px;"> 
     </form> 
    </div> 

Vous pouvez le voir ne fonctionne pas ici:

http://jsfiddle.net/CCxrp/1/

Que puis-je faire pour le faire fonctionner? Merci

Answer 1

Vous avez juste besoin d'échanger l'ordre des choses:

<div onclick="SearchCity(event)" id="ciudad-eq" style="cursor: pointer;"> 
    Not from Miami? 
    </div> 

    <div id="buscarciudad" style="display: none;"> 
     <form role="search" method="post" id="searchform" action="insert/insert-ip.php"> 
      <input type="text" id="city" name="ciudad" value="¿Cual es tu ciudad?" style="width: 140px;" > 
      <input type="submit" value="ir" style="padding: 2px 6px;"> 
     </form> 
    </div> 

<script> 
function SearchCity(evt){ 
    document.getElementById('ciudad-eq').style.display='none'; 
    document.getElementById('buscarciudad').style.display='inline'; 
    document.getElementById("city").focus(); 
} 
</script>  

Les divs doivent être dans les DOM avant JavaScript peut les chercher. C'est le principal avantage de JQuery $(document).ready(function(){ ...});

Answer 2

Fonctionne pour moi sous Firefox. Toutefois, cela peut être dû à un délai après l'affichage de l'élément. Essayez de changer votre code à ceci:

function SearchCity(evt){ 
    document.getElementById('ciudad-eq').style.display='none'; 
    document.getElementById('buscarciudad').style.display='inline'; 
    setTimeout(function() { document.getElementById("city").focus(); }, 1); 
} 

Cela ajoute un délai 1ms pour permettre l'élément à être visible, il devrait fonctionner sous IE.

jsfiddle updated

Explication des raisons pour lesquelles:

Sous IE, un élément non visible ne peut pas recevoir le focus. Selon la version de IE, il ne restaure pas toujours (ou re-flux) le document jusqu'à après la fonction JavaScript en cours a renvoyé. Cela conduit à toutes sortes de comportements bizarres, mais surtout, vous ne voyez pas de mises à jour visuelles pendant les blocs de code JavaScript. Combiné avec l'incapacité d'assigner le foyer, votre dernière ligne de JS était en jetant une erreur, ou en étant silencieusement ignorée. L'ajout de setTimeout permet effectivement de renvoyer le contrôle au navigateur afin qu'il puisse redistribuer le document. Ensuite, il exécute immédiatement la fonction de minuterie, et définit la mise au point. Le délai d'attente de 1ms est suffisant, car le navigateur prendra le relais même s'il y a une temporisation en attente.

Answer 3

Vous pouvez utiliser return false et son fonctionnement pour firefox.

<script> 
    function SearchCity(evt){ 
     document.getElementById('ciudad-eq').style.display='none'; 
     document.getElementById('buscarciudad').style.display='inline'; 
     document.getElementById("city").focus(); 
     return false; 
    } 
    </script> 

Answer 4

Vous devez pirater le navigateur par un tour tel que le code setTimeout est la suivante

setTimeout(function(){ 
    $("#contril_id").focus(); 
},500);