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 updated

解释原因：

在IE下，不可见的元素无法获得焦点。根据IE的版本，它不会始终重新呈现（或重新流动）文档，直到当前JavaScript函数返回之后。这会导致各种奇怪的行为，但大多数情况下，您在JavaScript代码块中看不到可视化更新。结合无法分配焦点，你的最后一行JS要么抛出错误，要么被忽略。

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

Answer 2

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

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

在JavaScript可以查找之前，div必须位于DOM中。这是JQuery的$(document).ready(function(){ ...});

的主要好处

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代码如下

^[a-f]+$

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

4 个答案: