¿Cómo obtener el elemento enfocado con jQuery?

Question

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?

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; 

Cuál debería utilizar? citando el jQuery docs:

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

La respuesta es:

document.activeElement 

Y si quieres un objeto jQuery envolver el elemento:

$(document.activeElement) 

Answer 2

$(document.activeElement) 

lo recuperará sin tener que buscar todo el árbol DOM como se recomienda en el jQuery documentation

Answer 3

Prueba esto:

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

Answer 4

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

(1). $(document.activeElement) funciona como se esperaba en Firefox, Chrome y Safari.

(2). $(':focus') funciona como se esperaba en Firefox y Safari.

Pasé al mouse para ingresar 'nombre' y presioné Enter en el teclado, luego traté de obtener el elemento enfocado.

(1). $(document.activeElement) devuelve la entrada: texto: nombre como se esperaba en Firefox, Chrome y Safari, pero devuelve la entrada: submit: addPassword en IE9

(2). $(':focus') retornos de entrada: de texto: nombre 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> 

Answer 5

¿Cómo es que nadie ha mencionado ..

document.activeElement.id 

que estoy usando IE8, y no lo he probado en cualquier 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 ingresas 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 
}