How to get the focused element with jQuery?

javascript jquery cursor element caret
dave picture dave · Jun 30, 2012 · Viewed 342.9k times · Source

Using jQuery, how can I get the input element that has the caret's (cursor's) focus?

Or in other words, how to determine if an input has the caret's focus?

Answer

gdoron is supporting Monica picture gdoron is supporting Monica · Jun 30, 2012 
// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

Which one should you use? quoting the jQuery docs:

As with other pseudo-class selectors (those that begin with a ":"), it is recommended to precede :focus with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':focus') is equivalent to $('*:focus'). If you are looking for the currently focused element, $( document.activeElement ) will retrieve it without having to search the whole DOM tree.

The answer is:

document.activeElement

And if you want a jQuery object wrapping the element:

$(document.activeElement)

Related questions

Set mouse focus and move cursor to end of input using jQuery

This question has been asked in a few different formats but I can't get any of the answers to work in my scenario. I am using jQuery to implement command history when user hits up/down arrows. When up arrow …

Read More
How do I change the style of the cursor with JQuery?

I want to change the style of the cursor as if it were going over a link. How do I do this?

Read More
Set cursor to specific position on specific line in a textarea

I am trying to somewhat duplicate the "autocorrect" functionality seen in programs like Microsoft Office's Outlook. For starters, anytime a user types "a " (the letter a and a space) at the beginning of a line I want to change that …

Read More