查看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/

- Adam

---

查看我的更新在下方： - iambriansreed

我已经更新了Fiddle，使用@iambriansreed下面的答案，使其可以正常工作。 - Irwin

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");
}

- iambriansreed

---

但它确实可以。紧接着我使用Rangy来保存选择，这很好地起作用了。 - Adam

问题是，当按钮被点击时，元素已经失去了焦点。 - Adam

Answer 2

如果您有多个 contenteditable 元素，使用纯 JavaScript：

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

Example:

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>

- evelynhathaway

Answer 3

这个怎么样？

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

我不知道浏览器对此的支持情况，但至少Chrome和Firefox支持它。

- Riesling

---

对我来说最可靠的答案，谢谢。其他大部分都不起作用。 - Jack

Answer 4

你可以试试这个。

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

也许如果您告诉我们您想要实现什么，我们会更有帮助。 同时，您可以在这里阅读：http://api.jquery.com/focus-selector/。

- Ilia Frenkel

---

好的，我已经更新了原帖并解释了我尝试做什么。（我尝试了你的方法，但似乎不起作用）。 - Adam

如果你点击我发布的链接，你会看到这个： 如果你正在寻找当前聚焦的元素，$( document.activeElement ) 可以直接获取它，而不必搜索整个 DOM 树。 - Ilia Frenkel