Di per sé, document.activeElementpuò comunque restituire un elemento se il documento non è focalizzato (e quindi nulla nel documento è focalizzato!)
Si può desiderare che il comportamento, oppure inoltre possibile, non importa (ad esempio all'interno di un keydownevento), ma se avete bisogno di sapere qualcosa in realtà è focalizzato, è possibile inoltre controllare document.hasFocus().
Quanto segue ti darà l'elemento focalizzato se ce n'è uno, altrimenti null.
var focused_element = null;
if (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
) {
focused_element = document.activeElement;
}
Per verificare se un elemento specifico ha lo stato attivo, è più semplice:
var input_focused = document.activeElement === input && document.hasFocus();
Per verificare se qualcosa è focalizzato, è di nuovo più complesso:
var anything_is_focused = (
document.hasFocus() &&
document.activeElement !== null &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
);
Nota di robustezza : nel codice in cui viene verificato document.bodye document.documentElement, ciò è dovuto al fatto che alcuni browser restituiscono uno di questi o nullquando nulla è focalizzato.
Non tiene conto se il <body>(o forse<html> ) aveva un tabIndexattributo e quindi poteva effettivamente essere focalizzato . Se stai scrivendo una libreria o qualcosa del genere e vuoi che sia robusto, probabilmente dovresti gestirlo in qualche modo.
Ecco una versione "one-liner" ( airquotes pesanti ) per ottenere l'elemento focalizzato, che è concettualmente più complicata perché devi conoscere i cortocircuiti e, sai, ovviamente non si adatta su una linea, supponendo che tu voglio che sia leggibile.
Non consiglierò questo. Ma se sei un 1337 hax0r, idk ... è lì.
Potresti anche rimuovere la || nullparte se non ti dispiace ottenere falsein alcuni casi. (Potresti ancora ottenere nullsedocument.activeElement è null):
var focused_element = (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement &&
document.activeElement
) || null;
Per verificare se un elemento specifico è focalizzato, in alternativa è possibile utilizzare gli eventi, ma in questo modo è necessaria l'installazione (e potenzialmente lo smontaggio) e, soprattutto, assume uno stato iniziale :
var input_focused = false;
input.addEventListener("focus", function() {
input_focused = true;
});
input.addEventListener("blur", function() {
input_focused = false;
});
È possibile correggere il presupposto dello stato iniziale utilizzando il modo non-evented, ma è possibile utilizzare tale invece.