How to get the focused element with jQuery?
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?
// 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)
$( document.activeElement )
Will retrieve it without having to search the whole DOM tree as recommended on the jQuery documentation
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>