En soi, document.activeElementpeut toujours renvoyer un élément si le document n'est pas focalisé (et donc rien dans le document n'est focalisé!)
Vous voudrez peut -être ce comportement, ou il peut ne pas avoir d'importance (par exemple dans un keydownévénement), mais si vous avez besoin de savoir que quelque chose est réellement concentré, vous pouvez également vérifier document.hasFocus().
Ce qui suit vous donnera l'élément focalisé s'il y en a un, ou bien null.
var focused_element = null;
if (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
) {
focused_element = document.activeElement;
}
Pour vérifier si un élément spécifique a le focus, c'est plus simple:
var input_focused = document.activeElement === input && document.hasFocus();
Pour vérifier si quelque chose est ciblé, c'est encore plus complexe:
var anything_is_focused = (
document.hasFocus() &&
document.activeElement !== null &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
);
Remarque sur la robustesse : dans le code dans lequel il vérifie document.bodyet document.documentElement, c'est parce que certains navigateurs retournent l'un d'eux ou nulllorsque rien n'est focalisé.
Il ne prend pas en compte si le <body>(ou peut-être <html>) avait un tabIndexattribut et pouvait donc être réellement concentré . Si vous écrivez une bibliothèque ou quelque chose et que vous voulez qu'elle soit robuste, vous devriez probablement gérer cela d'une manière ou d'une autre.
Voici une version ( one-liner) ( lourd airquotes) pour obtenir l'élément focalisé, ce qui est conceptuellement plus compliqué parce que vous devez connaître les courts-circuits, et vous savez, cela ne tient évidemment pas sur une seule ligne, en supposant que vous veulent qu'il soit lisible.
Je ne recommanderai pas celui-ci. Mais si vous êtes un 1337 hax0r, idk ... il est là.
Vous pouvez également retirer la || nullpièce si cela ne vous dérange pas d'obtenir falsedans certains cas. (Vous pouvez toujours obtenir nullsi document.activeElementest null):
var focused_element = (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement &&
document.activeElement
) || null;
Pour vérifier si un élément spécifique est ciblé, vous pouvez également utiliser des événements, mais cette méthode nécessite une configuration (et éventuellement un démontage) et, surtout, suppose un état initial :
var input_focused = false;
input.addEventListener("focus", function() {
input_focused = true;
});
input.addEventListener("blur", function() {
input_focused = false;
});
Vous pouvez corriger l'hypothèse de l'état initial en utilisant la méthode sans événement, mais vous pourriez aussi bien l'utiliser à la place.