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