See if ContentEditable div has focus

问题:

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:

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.

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

回答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.

Or:

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

回答2:

For pure JavaScript when you have multiple contenteditable elements:

Check document.activeElement.id or 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>

回答3:

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.

回答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/.