javascript focus() 不适用于 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

在 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 下工作。

jsfiddle 更新

原因解释：

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

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