查看ContentEditable div是否具有焦点

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

对于纯JavaScript,当您有多个contenteditable元素时:

检查document.activeElement.id或document.activeElement.isContentEditable.

例:

function isFocused() {
  if (document.activeElement.id === "journal-content") {
    alert("Focused!");
  } else {
    alert("Not focused :(");
  }
}

#journal-content {
  background-color: #eee;
}
#not-journal-content {
  background-color: #ccc;
}

<div id="journal-content" contenteditable="true" onclick="isFocused()">Journal Content</div>
<div id="not-journal-content" contenteditable="true" onclick="isFocused()">Not Journal Content</div>