javascript - .focus() 单击两次时不聚焦

Question

jQuery 1.9.1 中的 .focus() 不会每秒都关注 iframe。例如，第一次有效，第二次无效，第三次有效，第四次无效，等等。

我创建了这个 jsFiddle 来测试这个问题：http: //jsfiddle.net/QVuhR/1/。这是来自 jsfiddle 的代码：

Javascript代码：

$(document).ready(function(){
    var editor = (textEditor.contentDocument) ? textEditor.contentDocument : textEditor.document;
    editor.designMode = "on";

    $("#focusButton").click(function(e){
        $("#textEditor").focus();
    });
});

HTML：

<button id="focusButton">Focus Test</button>
<iframe id="textEditor"></iframe>

焦点在 Firefox 上运行良好，但在 Chrome 上不起作用。

Chrome 是否有解决此错误的方法？

Answer 1

我首先通过明确模糊使其工作：http: //jsfiddle.net/U8JGd/

$(document).ready(function(){
    var editor = (textEditor.contentDocument) ? textEditor.contentDocument : textEditor.document;
    editor.designMode = "on";

    $("#focusButton").click(function(e){
        $("#textEditor").blur();
        $("#textEditor").focus();
    });


});

Answer 2

您可以尝试先手动将焦点重定向到其他内容，然后将焦点返回：

$("#focusButton").click(function(e){
    $("#focusButton").focus();
    $("#textEditor").focus();
});

不确定这是否符合最佳编码实践，但它有效。

Answer 3

这似乎是一种解决方法：

$("#focusButton").click(function(e){
    if (!$("#textEditor").is(":focus"))
        $("#textEditor").focus();
});

Answer 4

在 chrome 中，焦点似乎是一个切换开关。

$(document).ready(function(){
var editor = (textEditor.contentDocument) ? textEditor.contentDocument : textEditor.document;
editor.designMode = "on";

$("#focusButton").click(function(e){
    if(!$("#textEditor").is(":focus"))
    {
    $("#textEditor").focus();
    }
});


});