¿Cómo obtener el elemento enfocado con jQuery?

Respuestas:

740 
// 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)
gdoron está apoyando a Monica
fuente
2
pero espera, ¿cómo obtengo el elemento que tiene el cursor?
Dave
@dave. ¿Qué quieres decir con "tiene el cuidado" ? enfocado? el raton esta en el?
Gdoron está apoyando a Mónica
bueno, aquí está mi situación: cuando hago clic en un elemento en particular, quiero colocar un carácter en el último elemento de texto de entrada enfocado. Básicamente, el elemento que tenía el foco último o justo antes de hacer clic en ese elemento en particular.
Dave
1
@dave. No se puede hacer. Creo que solo IE tiene esta característica, pero ahora estás haciendo una pregunta diferente, deberías hacerlo en una nueva pregunta.
Gdoron está apoyando a Mónica el
3
Me gusta cómo usaste el nombre de la variable con prefijo $ $focused, ya que supongo que haces eso para denotar que var es un objeto jquery. TYVM.
Valamas
36 
$( document.activeElement )

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

Salmón joven
fuente
1
¿Cómo obtener el elemento que tiene el cursor?
Dave
6

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>
ucdream
fuente
5

Prueba esto:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});
Adil Malik
fuente
Sí, es por eso que este ciclo tendrá solo una iteración. alerta es solo para demostrar el ejemplo. Si tiene esta variable, puede hacerlo todo con el elemento que desee.
Adil Malik
¿Cómo es posible enfocar más de un elemento?
Andreas Furster
@AndreasFurster tienes razón. Siempre habrá una sola iteración en este ciclo. Puede que esta no sea la mejor manera de lograr el objetivo, pero funciona.
Adil Malik
Vea la respuesta aceptada para saber por qué esta es la peor / menos eficiente forma de hacerlo. (innecesario .eachno soportar)
Brad Kent
2

¿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
}
Sparky aka tom
fuente
1

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

Travis Heeter
fuente
1

Prueba esto::

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

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

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