How to get the focused element with jQuery?

Question

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?

Pamper

Possible duplicate #967596 – Viridescent

Possible duplicate: #516652 – Fortaleza

Answer 1

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

Geum

but wait, how do i get teh element that has the caret? – Pamper

@dave. What do you mean "has the caret" ? focused? the mouse is on it? – Geum

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. – Pamper

@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. – Geum

@Pamper in this case you should use blur try this $('input[type="text"]').on('blur', function() { // do something here }) – Amadus

I like how you used $ prefixed variable name, $focused, as I assume you do that to denote the var is a jquery object. TYVM. – Pangaro

OSX typically doesn't give non-text inputs "focus", so document.activeElement generally doesn't work for buttons, radios, etc. – Vulcanite

@SoldOutActivist that's not the case for Safari, Chrome, or Firefox (at least not currently) All three browsers correctly return the currently focused button via document.activeElement – Pseudo

Answer 2

$( document.activeElement )

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

Leopard

how to get element that has the caret? – Pamper

Answer 3

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>

Mitochondrion

Answer 4

Try this:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});

Apodictic

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. – Apodictic

How is it possible to focus more than one element? – Fleisher

@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. – Apodictic

See the accepted answer to learn why this is the worst / least efficient way to do it. (unnecessary .each non-withstanding) – Pseudo

Answer 5

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
}

Precritical

.id will very likely be undefined on multiple elements – Suttle

Answer 6

$(':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.

Saskatchewan

Answer 7

Try this::

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

Grefe

Answer 8

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

if ($('#inputId').is(':focus')) {
    //your code
}

Tolerable

Yes, another way to do it. It really does depend on which version of JQuery your using :( – Precritical