Question

我正试图检查一个可信赖的div是否有焦点，但我遇到了一些麻烦。到目前为止，这是我的代码：

if ($("#journal-content:focus")) {
    alert("Has Focus");
} else {
    alert("Doesn't Have Focus");
}

问题是，它总是返回“有焦点”，即使它没有。这样做的最佳方式是什么？

更新：执行此操作的原因是在插入新元素之前查看光标是否位于所需位置。否则，如果用户单击的最后一个位置在标题中，那么当我使用Rangy恢复选择并将其替换为新元素时，它最终会出现在标题中。我需要一种方法来确定contenteditable div是否聚焦/光标在其中，所以如果没有，我只需在最后插入我插入的元素。

更新2：这是一个说明我的问题的JSFiddle：http://jsfiddle.net/2NHrM/

Answer 1

尝试：

if ($("#journal-content").is(":focus")) {
    alert("Has Focus");
} else {
    alert("Doesn't Have Focus");
}

或者：

window.contenteditable_focused = false;

$("#journal-content").focus(function() {
    //alert("Has Focus");
    contenteditable_focused = true;
});
$("#journal-content").blur(function() {
    //alert("Doesn't Have Focus");        
    contenteditable_focused = false;
});

在执行脚本之前检查contenteditable_focused。

或者：

if ($( document.activeElement ).is("#journal-content")) {
    alert("Has Focus");
} else {
    alert("Doesn't Have Focus");
}

Answer 2

这个怎么样？：

if (document.activeElement.isContentEditable) {
...
}

我不知道浏览器对此的支持程度如何，但至少Chrome和Firefox支持它。

Answer 3

你可以试试这个

if ($("#journal-content").is(":focus")) {
...

也许如果你告诉我们你想要达到什么目标，我们会更有帮助。同时，您可以在此处阅读：http://api.jquery.com/focus-selector/。

查看ContentEditable div是否具有焦点

3 个答案: