See if ContentEditable div has focus

Question

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/

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

Solution 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>

Solution 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.

Comments

[Adam]

...but it does. Right afterwards i'm using Rangy to save the selection, which works just fine.

[Adam]

Alrighty, updated my original post with an explanation of what I'm attempting to do. ( I tried yours and it doesn't seem to work).

[Ilia Frenkel]

If you follow the link I've posted you'll see this: If you are looking for the currently focused element, $( document.activeElement ) will retrieve it without having to search the whole DOM tree.

[Adam]

The problem is, by the time the button is clicked the element has already lost focus.

[Jack]

Most reliable answer for me, thanks. Most other didn't work