javascript focus（）不适用于Firefox和IE？

我试图显示一个窗体并将其聚焦，因为某些原因，它只在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>

功能搜索城市（evt）{
document.getElementById（'ciudad-eq'）.style.display='none'；
document.getElementById（'buscarciudad'）.style.display='inline'；
document.getElementById（“城市”）.focus（）；
}
不是迈阿密人吗？

您可以在此处看到它不工作：

---

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

在Firefox下为我工作。但是，这可能是因为在显示项目后需要延迟。尝试将代码更改为：

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

这会增加1毫秒的延迟，使项目可见，因此它应该在IE下工作

解释原因：

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

---

添加

setTimeout

可以有效地将控制权返还给浏览器，使其能够回流文档。然后，它立即运行计时器功能，并设置焦点。1ms的超时时间足够了，因为即使有计时器等待，浏览器也会接管。

在Firefox下对我有效。但是，这可能是因为在显示项目后需要延迟。尝试将代码更改为：

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

这会增加1毫秒的延迟，使项目可见，因此它应该在IE下工作

解释原因：

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

---

添加

setTimeout

可以有效地将控制权返还给浏览器，使其能够回流文档。然后，它立即运行计时器功能，并设置焦点。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>    

不是迈阿密人吗？
功能搜索城市（evt）{
document.getElementById（'ciudad-eq'）.style.display='none'；
document.getElementById（'buscarciudad'）.style.display='inline'；
document.getElementById（“城市”）.focus（）；
}

---

div必须在DOM中，JavaScript才能查找它们。这是JQuery的

$（document.ready（function（）{…}）的主要优点
您只需交换事物的顺序：

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


不是迈阿密人吗？
功能搜索城市（evt）{
document.getElementById（'ciudad-eq'）.style.display='none'；
document.getElementById（'buscarciudad'）.style.display='inline'；
document.getElementById（“城市”）.focus（）；
}

div必须在DOM中，JavaScript才能查找它们。这是JQuery的
$（document.ready（function（）{…}）的主要优点
您可以在firefox中使用return false及其working me

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


功能搜索城市（evt）{
document.getElementById（'ciudad-eq'）.style.display='none'；
document.getElementById（'buscarciudad'）.style.display='inline'；
document.getElementById（“城市”）.focus（）；
返回false；
}
您可以在firefox中使用return false及其工作模式

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


功能搜索城市（evt）{
document.getElementById（'ciudad-eq'）.style.display='none'；
document.getElementById（'buscarciudad'）.style.display='inline'；
document.getElementById（“城市”）.focus（）；
返回false；
}
您需要使用setTimeout之类的技巧破解浏览器，代码如下

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

您需要通过设置超时代码等技巧攻击浏览器，如下所示

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

您的链接在firefox中正常工作，在firefox 5和IE 6（如预期）的本地页面中也正常工作。JSFIDLE在IE6中不起作用，所以是的，我看到它“不起作用”。-）您的链接在firefox中正常工作，在firefox 5和IE 6（如预期）的本地页面中也正常工作。JSFIDLE在IE6中不起作用，所以是的，我看到它“不起作用”。-）