JavaScript焦点（）不适用于Firefox和IE？

Question

我试图出现一个窗体并将其集中，出于某种原因它只能在Chrome上使用。我怎样才能使它跨浏览器工作？

<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> 

你可以看到它不是在这里工作：

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

我能做些什么，使工作？谢谢

Answer 1

你只需要交换的事物的秩序：

<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>  

的div必须在DOM前JavaScript可以找他们。这是JQuery的主要优势$(document).ready(function(){ ...});

Answer 2

适用于Firefox。但是，这可能是由于在显示项目后需要延迟。尝试更改您的代码到这：

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

这增加了1ms的延迟，让项目变得可见，所以它应该在IE下工作。

jsfiddle updated

为什么说明：

在IE，即是不可见的不能接收焦点的元件。根据IE的版本，它不会总是重新呈现（或重新流动）文档，直到之后当前的JavaScript函数已返回。这会导致各种奇怪的行为，但大多数情况下，您在JavaScript代码块中看不到视觉更新。再加上无法分配焦点，JS的最后一行是要么抛出错误，要么被默默忽略。

添加setTimeout有效地将控制权交还给浏览器，因此它可以重排文档。然后，它立即运行定时器功能，并设置焦点。 1ms超时已足够，因为即使有定时器在等待，浏览器也会接管。

Answer 3

您可能会使用return false并将其工作在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

您需要通过一招如setTimeout的代码破解浏览器是如下

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