Por sí solo, document.activeElementaún puede devolver un elemento si el documento no está enfocado (¡y por lo tanto, nada en el documento está enfocado!)
Es posible que desee ese comportamiento, o puede que no importe (por ejemplo, dentro de un keydownevento), pero si necesita saber que algo está realmente enfocado, también puede verificarlo document.hasFocus().
Lo siguiente le dará el elemento enfocado si hay uno, o si no null.
var focused_element = null;
if (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
) {
focused_element = document.activeElement;
}
Para verificar si un elemento específico tiene foco, es más simple:
var input_focused = document.activeElement === input && document.hasFocus();
Para verificar si algo está enfocado, es más complejo nuevamente:
var anything_is_focused = (
document.hasFocus() &&
document.activeElement !== null &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
);
Nota de robustez : en el código donde se compara document.bodyy document.documentElement, esto se debe a que algunos navegadores devuelven uno de estos o nullcuando nada está enfocado.
No tiene en cuenta si el <body>(o tal vez <html>) tenía un tabIndexatributo y, por lo tanto, podría enfocarse . Si está escribiendo una biblioteca o algo y quiere que sea robusta, probablemente debería manejar eso de alguna manera.
Aquí hay una versión de "un trazo" ( comillas aéreas pesadas ) para obtener el elemento enfocado, que es conceptualmente más complicado porque tienes que saber sobre el cortocircuito y, obviamente, no cabe en una línea, suponiendo que quiero que sea legible.
No voy a recomendar este. Pero si eres un 1337 hax0r, idk ... está ahí.
También puede eliminar la || nullpieza si no le importa falseen algunos casos. (Aún podría obtener nullsi document.activeElementes null):
var focused_element = (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement &&
document.activeElement
) || null;
Para verificar si un elemento específico está enfocado, alternativamente podría usar eventos, pero de esta manera requiere configuración (y potencialmente desmontaje), y lo que es más importante, asume un estado inicial :
var input_focused = false;
input.addEventListener("focus", function() {
input_focused = true;
});
input.addEventListener("blur", function() {
input_focused = false;
});
Puede corregir la suposición de estado inicial utilizando la forma no especificada, pero también podría usarla en su lugar.