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: /

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/

• javascript
• jquery
• css
• html
• contenteditable

• Check out my update under Or: – iambriansreed Commented Mar 30, 2012 at 3:01
• I've updated the Fiddle using @iambriansreed's answer below so that it works. – Irwin Commented Jun 7, 2013 at 18:13

4 Answers 4

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

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.

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>

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