14

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/

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

4 Answers 4

15

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
  • ...but it does. Right afterwards i'm using Rangy to save the selection, which works just fine.
    – Adam
    Mar 30, 2012 at 2:54
  • The problem is, by the time the button is clicked the element has already lost focus.
    – Adam
    Mar 30, 2012 at 3:59
5

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.

1
  • Most reliable answer for me, thanks. Most other didn't work
    – Jack
    May 14, 2020 at 5:47
5

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>

0

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

2
  • 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).
    – Adam
    Mar 30, 2012 at 2:58
  • 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. Mar 30, 2012 at 3:02

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.