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\")         


        

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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>