javascript focus()不能在Firefox和IE上工作

javascript focus() not working on Firefox and IE?

本文关键字：IE 工作 Firefox focus 不能 javascript      更新时间：2023-09-26

我试图出现一个形式和焦点，由于某种原因，它只适用于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/

我怎么做才能让它工作?由于

在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更新

原因解释:

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

div必须在DOM中，JavaScript才能找到它们。这是JQuery的$(document).ready(function(){ ...});

的主要优点

您可以使用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>

您需要通过setTimeout等技巧破解浏览器，代码如下

setTimeout(function(){
   $("#contril_id").focus();
},500);
相关文章：