394

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?

2

8 Answers 8

819
// 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)
8
  • 2
    but wait, how do i get teh element that has the caret?
    – dave
    Jun 30, 2012 at 22:16
  • @dave. What do you mean "has the caret" ? focused? the mouse is on it?
    – gdoron
    Jun 30, 2012 at 22:18
  • well here is my situation: when i click a particular element, i want to place a character in the last focused input text element. Basically the element that had focus last or right before clicking that particular element.
    – dave
    Jun 30, 2012 at 22:20
  • 1
    @dave. It can't be done. I think only IE has this feature, but you're asking now a different question, you should do it in a new question.
    – gdoron
    Jun 30, 2012 at 22:23
  • 4
    I like how you used $ prefixed variable name, $focused, as I assume you do that to denote the var is a jquery object. TYVM.
    – Valamas
    Jul 10, 2013 at 1:35
42
$( document.activeElement )

Will retrieve it without having to search the whole DOM tree as recommended on the jQuery documentation

1
  • 1
    how to get element that has the caret?
    – dave
    Jun 30, 2012 at 22:17
6

I've tested two ways in Firefox, Chrome, IE9 and Safari.

(1). $(document.activeElement) works as expected in Firefox, Chrome and Safari.

(2). $(':focus') works as expected in Firefox and Safari.

I moved into the mouse to input 'name' and pressed Enter on keyboard, then I tried to get the focused element.

(1). $(document.activeElement) returns the input:text:name as expected in Firefox, Chrome and Safari, but it returns input:submit:addPassword in IE9

(2). $(':focus') returns input:text:name as expected in Firefox and Safari, but nothing in IE

<form action="">
    <div id="block-1" class="border">
        <h4>block-1</h4>
        <input type="text" value="enter name here" name="name"/>            
        <input type="button" value="Add name" name="addName"/>
    </div>
    <div id="block-2" class="border">
        <h4>block-2</h4>
        <input type="text" value="enter password here" name="password"/>            
        <input type="submit" value="Add password" name="addPassword"/>
    </div>
</form>
5

Try this:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});
4
  • Yes, that's why this loop will have only one iteration. alert is just to demonstrate the example. If you have this variable, you can everything with the element that you want.
    – Adil Malik
    Jun 30, 2012 at 22:08
  • How is it possible to focus more than one element? Sep 15, 2014 at 12:36
  • @AndreasFurster you're right. There will always be only one iteration in this loop. This might not be the best way to achieve the goal, but it works.
    – Adil Malik
    Sep 15, 2014 at 16:13
  • See the accepted answer to learn why this is the worst / least efficient way to do it. (unnecessary .each non-withstanding)
    – Brad Kent
    Apr 10, 2017 at 18:33
3

How is it noone has mentioned..

document.activeElement.id

I am using IE8, and have not tested it on any other browser. In my case, I am using it to make sure a field is a minimum of 4 characters and focused before acting. Once you enter the 4th number, it triggers. The field has an id of 'year'. I am using..

if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
    // action here
}
1
  • .id will very likely be undefined on multiple elements
    – aequalsb
    Mar 1, 2022 at 10:09
1

$(':focus')[0] will give you the actual element.

$(':focus') will give you an array of elements, usually only one element is focused at a time so this is only better if you somehow have multiple elements focused.

1

Try this::

$(document).on("click",function(){
    alert(event.target);
    });
1

If you want to confirm if focus is with an element then

if ($('#inputId').is(':focus')) {
    //your code
}
1
  • Yes, another way to do it. It really does depend on which version of JQuery your using :( Dec 8, 2022 at 21:44

Your Answer

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.