Por si só, document.activeElementainda pode retornar um elemento se o documento não estiver focado (e, portanto, nada no documento estiver focado!)
Você pode querer esse comportamento, ou ele pode não importar (por exemplo, dentro de um keydownevento), mas se precisar saber que algo está realmente focado, você pode verificar adicionalmente document.hasFocus().
A seguir, você fornece o elemento focado, se houver um, ou então null.
var focused_element = null;
if (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
) {
focused_element = document.activeElement;
}
Para verificar se um elemento específico tem foco, é mais simples:
var input_focused = document.activeElement === input && document.hasFocus();
Para verificar se alguma coisa está focada, é mais complexo novamente:
var anything_is_focused = (
document.hasFocus() &&
document.activeElement !== null &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
);
Robustez Nota : no código em que ele faz a verificação document.bodye document.documentElement, isso ocorre porque alguns navegadores retornam um desses ou nullquando nada está focado.
Não explica se o <body>(ou talvez <html>) tinha um tabIndexatributo e, portanto, poderia realmente ser focado . Se você estiver escrevendo uma biblioteca ou algo assim e quiser que ela seja robusta, provavelmente deve lidar com isso de alguma forma.
Aqui está uma ( pesados airquotes) versão "one-liner" de conseguir o elemento focalizado, que é conceitualmente mais complicado porque você tem que saber sobre curto-circuito, e você sabe, é óbvio que não se encaixa em uma linha, supondo que você quer que seja legível.
Eu não vou recomendar este. Mas se você é um 1337 hax0r, idk ... está lá.
Você também pode remover a || nullpeça se não se importar falseem receber alguns casos. (Você ainda pode obter nullse document.activeElementfor null):
var focused_element = (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement &&
document.activeElement
) || null;
Para verificar se um elemento específico está focado, como alternativa, você pode usar eventos, mas dessa maneira requer configuração (e potencialmente desmontagem) e, o que é mais importante, assume um estado inicial :
var input_focused = false;
input.addEventListener("focus", function() {
input_focused = true;
});
input.addEventListener("blur", function() {
input_focused = false;
});
Você pode corrigir a suposição de estado inicial usando a maneira não-evento, mas também pode usá-la.