¿Cómo puedo saber qué elemento DOM tiene el foco?
Me gustaría saber, en JavaScript, qué elemento tiene actualmente el foco. He estado buscando en el DOM y todavía no he encontrado lo que necesito. ¿Hay alguna manera de hacer esto y cómo?
La razón por la que estaba buscando esto:
Estoy intentando crear teclas como las flechas y enternavegar a través de una tabla de elementos de entrada. La pestaña funciona ahora, pero ingresa, y parece que las flechas no funcionan de forma predeterminada. Ya tengo configurada la parte de manejo de claves, pero ahora necesito descubrir cómo mover el foco en las funciones de manejo de eventos.
Utilice document.activeElement, es compatible con todos los principales navegadores.
Anteriormente, si intentaba averiguar qué campo del formulario tiene el foco, no podía hacerlo. Para emular la detección en navegadores más antiguos, agregue un controlador de eventos de "enfoque" a todos los campos y registre el último campo enfocado en una variable. Agregue un controlador de "desenfoque" para borrar la variable en un evento de desenfoque para el último campo enfocado.
Si necesita eliminar el, activeElementpuede utilizar el desenfoque; document.activeElement.blur(). Cambiará el activeElementa body.
Enlaces relacionados:
- Compatibilidad del navegador activeElement
- alternativa jQuery para document.activeElement
Como dijo JW, no puede encontrar el elemento enfocado actual, al menos de forma independiente del navegador. Pero si su aplicación es sólo IE (algunas lo son...), puede encontrarla de la siguiente manera:
document.activeElement
Parece que IE no tenía todo mal después de todo, esto es parte del borrador de HTML5 y parece ser compatible al menos con la última versión de Chrome, Safari y Firefox.
Si puedes usar jQuery, ahora es compatible con :focus, solo asegúrate de estar usando la versión 1.6+.
Esta declaración le brindará el elemento actualmente enfocado.
$(":focus")
De: Cómo seleccionar un elemento que tiene foco con jQuery
document.activeElementAhora forma parte del borrador de especificación de trabajo de HTML5, pero es posible que aún no sea compatible con algunos navegadores no principales, móviles o antiguos. Puede recurrir a querySelector(si es compatible). También vale la pena mencionar que document.activeElementvolverá document.bodysi ningún elemento está enfocado, incluso si la ventana del navegador no tiene el foco.
El siguiente código solucionará este problema y ofrecerá querySelectorun soporte un poco mejor.
var focused = document.activeElement;
if (!focused || focused == document.body)
focused = null;
else if (document.querySelector)
focused = document.querySelector(":focus");
Un aspecto adicional a tener en cuenta es la diferencia de rendimiento entre estos dos métodos. Consultar el documento con selectores siempre será mucho más lento que acceder a la activeElementpropiedad. Vea esta prueba de jsperf.com .
