查看ContentEditable div是否具有焦点

I'm attempting to check whether or not a contenteditable div has focus, but I'm having some trouble. Here's my code so far:

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

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

The problem is, it's always returning "Has focus" even when it doesn't. What's the best way to go about doing this?

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

Update: The reason for doing this is to see whether or not the cursor is in the desired location before inserting the new element. Otherwise, if the last place the user clicked was in the header, then when I restore the selection with Rangy and replace it with a new element, it ends up in the header. I need a way to find out if the contenteditable div is focused/has the cursor in it, so if not, I'll simply append the element I'm inserting at the end.

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

Update 2: Here's a JSFiddle illustrating my problem: http://jsfiddle.net/2NHrM/

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

4 个解决方案

#1

Try:

尝试：

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

Or:

要么：

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

Check for contenteditable_focused before executing your script.

在执行脚本之前检查contenteditable_focused。

Or:

要么：

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

#2

What about this?:

那这个呢？：

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

I don't know how well browser support for this is but at least Chrome and Firefox support it.

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

#3

For pure JavaScript when you have multiple contenteditable elements:

对于纯JavaScript，当您有多个contenteditable元素时：

The CSS and Markup is purely for the snippet

CSS和Markup纯粹是用于代码片段

Try running the snippet and pressing either element.

尝试运行代码段并按任一元素。

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>

#4

You can try this

你可以试试这个

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

Maybe if you'll tell us what are you trying to achieve we'll be of a more help. Meanwhile, you can have a read here: http://api.jquery.com/focus-selector/.

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

#1