Question

我在IE8下面的代码中遇到焦点事件处理问题我得到以下输出：

LOG: set focus txt1
LOG: set focus txt2
LOG: txt1 focus
LOG: txt2 focus

但在所有其他浏览器中输出为：

LOG: set focus txt1
LOG: txt1 focus
LOG: set focus txt2
LOG: txt2 focus

似乎IE8将所有焦点请求排队并在当前函数结束后执行事件处理程序。

是否有任何解决办法迫使IE8像其他浏览器一样表现得很好？

<html>
<head>
</head>
<body>
<script>
        function test(){
            console.log('set focus txt1');
            document.getElementById('txt1').focus();
            console.log('set focus txt2');
            document.getElementById('txt2').focus();
        }
    </script>
<input id="txt1" type="text" onfocus="javascript:console.log('txt1 focus')" style="width:100px" />
<input id="txt2" type="text" onfocus="javascript:console.log('txt2 focus')" style="width:100px" />
<button value="Click" onclick="javascript:test()"></button>
</body>
</html>

Answer 1

IE延迟实际焦点，直到函数test()完成后，所以我担心你必须使用如下构造：

function test(){
    console.log('set focus txt1');
    document.getElementById('txt1').focus();

    window.setTimeout(function() {
        console.log('set focus txt2');
        document.getElementById('txt2').focus();
    }, 1);
}

这里我推迟了函数的第二部分，以便IE在第二部分执行之前有时间将焦点设置在txt1上。

顺便说一下，你应该在onclick和onfocus属性中省略前缀javascript:。 javascript:前缀只应在href属性中使用。

Answer 2

我已经看到较旧版本的IE出现此问题。有些人为此提出了非常有创意的答案，有时还提供了很多代码，例如使用计时器等。解决方案实际上是一个问题。我已经确认这可以在旧版IE和现代浏览器（例如Chrome）中使用。

如果您知道要表化的字段的索引，我要做的就是在jQuery中进行此操作：

 $('input:text')[5].focus();

或者使用普通的JavaScript。

document.getElementsByName("elementname")[0].focus();

IE焦点事件处理程序延迟

2 个答案: