¿Cómo obtener el elemento enfocado con jQuery?

Usando jQuery, ¿cómo puedo obtener el elemento de entrada que tiene el foco del cursor (cursor)?

O, en otras palabras, ¿cómo determinar si una entrada tiene el foco del cursor?

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

¿Cual deberías usar? citando los documentos de jQuery :

Al igual que con otros selectores de pseudo-clase (aquellos que comienzan con un ":"), se recomienda preceder: enfocar con un nombre de etiqueta o algún otro selector; de lo contrario, el selector universal ("*") está implícito. En otras palabras, lo desnudo $(':focus')es equivalente a $('*:focus'). Si está buscando el elemento actualmente enfocado, $ (document.activeElement) lo recuperará sin tener que buscar en todo el árbol DOM.

La respuesta es:

document.activeElement

Y si quieres un objeto jQuery que envuelva el elemento:

$(document.activeElement)

$( document.activeElement )

Lo recuperará sin tener que buscar en todo el árbol DOM como se recomienda en la documentación de jQuery

He probado dos formas en Firefox, Chrome, IE9 y Safari.

(1) $(document.activeElement)Funciona como se espera en Firefox, Chrome y Safari.

(2) $(':focus')Funciona como se espera en Firefox y Safari.

Me moví al mouse para ingresar 'nombre' y presioné Enter en el teclado, luego intenté obtener el elemento enfocado.

(1) $(document.activeElement)devuelve el input: text: name como se esperaba en Firefox, Chrome y Safari, pero devuelve input: submit: addPassword en IE9

(2) $(':focus')devuelve input: text: name como se esperaba en Firefox y Safari, pero nada en 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>

Prueba esto:

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

¿Cómo es que nadie ha mencionado ..

document.activeElement.id

Estoy usando IE8 y no lo he probado en ningún otro navegador. En mi caso, lo estoy usando para asegurarme de que un campo tenga un mínimo de 4 caracteres y esté enfocado antes de actuar. Una vez que ingresa el 4to número, se dispara. El campo tiene una identificación de 'año'. Estoy usando..

if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
    // action here
}

$(':focus')[0] te dará el elemento real.

$(':focus') le dará una variedad de elementos, generalmente solo un elemento está enfocado a la vez, por lo que esto es mejor si de alguna manera tiene múltiples elementos enfocados.

Prueba esto::

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

Si desea confirmar si el foco está con un elemento, entonces

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