Сам по собі document.activeElementвсе ще може повернути елемент, якщо документ не зосереджений (і, отже, нічого в документі не зосереджено!)
Ви можете захотіти такої поведінки, або це може не мати значення (наприклад, в рамках keydownподії), але якщо вам потрібно знати, що щось насправді зосереджено, ви можете додатково перевіритиdocument.hasFocus() .
Нижче наведено сфокусований елемент, якщо він є, або інший null.
var focused_element = null;
if (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
) {
focused_element = document.activeElement;
}
Щоб перевірити, чи певний елемент має фокус, простіше:
var input_focused = document.activeElement === input && document.hasFocus();
Щоб перевірити, чи щось зосереджено, знову складніше:
var anything_is_focused = (
document.hasFocus() &&
document.activeElement !== null &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
);
Надійність Примітка : У коді , де він перевіряє проти document.bodyі document.documentElementце відбувається тому , що деякі браузери повертають один з них або nullколи нічого не сфокусований.
Він не враховує, <body>чи <html>мав (або, можливо ) tabIndexатрибут і таким чином насправді можна було зосередити увагу . Якщо ви пишете бібліотеку чи щось, і хочете, щоб вона була надійною, вам, мабуть, слід якось впоратися з цим.
Ось ( важка повістка) "однолінійна" версія отримання сфокусованого елемента, що концептуально складніше, тому що ви повинні знати про коротке замикання, і ви знаєте, це, очевидно, не підходить до однієї лінії, якщо припустити, що ви хочу, щоб воно було читабельним.
Я не рекомендую цього. Але якщо ти 1337 hax0r, idk ... він є.
Ви також можете зняти || nullдеталь, якщо ви не заперечуєте отримати falseв деяких випадках. (Ви все одно можете отримати, nullякщо document.activeElementє null):
var focused_element = (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement &&
document.activeElement
) || null;
Для перевірки того, чи визначений елемент зосереджено, ви також можете використовувати події, але цей спосіб вимагає налаштування (і, можливо, відривання), і що важливо, передбачає початковий стан :
var input_focused = false;
input.addEventListener("focus", function() {
input_focused = true;
});
input.addEventListener("blur", function() {
input_focused = false;
});
Ви можете виправити початкове припущення про стан, використовуючи нерівний спосіб, але тоді ви можете просто використовувати це замість цього.