How to get the focused element with jQuery?

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