Chính nó, document.activeElementvẫn có thể trả về một phần tử nếu tài liệu không được tập trung (và do đó không có gì trong tài liệu được tập trung!)
Bạn có thể muốn hành vi đó, hoặc nó có thể không quan trọng (ví dụ trong một keydownsự kiện), nhưng nếu bạn cần biết điều gì đó thực sự tập trung, bạn có thể kiểm tra thêm document.hasFocus().
Sau đây sẽ cung cấp cho bạn các yếu tố tập trung nếu có một, hoặc khác null.
var focused_element = null;
if (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
) {
focused_element = document.activeElement;
}
Để kiểm tra xem một yếu tố cụ thể có tập trung hay không, nó đơn giản hơn:
var input_focused = document.activeElement === input && document.hasFocus();
Để kiểm tra xem mọi thứ có tập trung hay không, nó lại phức tạp hơn:
var anything_is_focused = (
document.hasFocus() &&
document.activeElement !== null &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
);
Tính mạnh mẽ Lưu ý : Trong mã nơi kiểm tra document.bodyvà document.documentElementđiều này là do một số trình duyệt trả về một trong những trình duyệt này hoặc nullkhi không có gì được tập trung.
Nó không giải thích nếu <body>(hoặc có thể <html>) có tabIndexthuộc tính và do đó thực sự có thể được tập trung . Nếu bạn đang viết một thư viện hoặc một cái gì đó và muốn nó mạnh mẽ, có lẽ bạn nên xử lý bằng cách nào đó.
Dưới đây là một ( nặng airquotes) phiên bản "one-liner" nhận được các yếu tố tập trung, đó là khái niệm phức tạp hơn bởi vì bạn phải biết về ngắn mạch, và cậu biết đấy, nó rõ ràng là không phù hợp trên cùng một dòng, giả sử bạn muốn nó có thể đọc được.
Tôi sẽ không đề nghị cái này. Nhưng nếu bạn là 1337 hax0r, idk ... nó ở đó.
Bạn cũng có thể loại bỏ || nullphần này nếu bạn không bận tâm đến falsemột số trường hợp. (Bạn vẫn có thể nhận được nullnếu document.activeElementlà null):
var focused_element = (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement &&
document.activeElement
) || null;
Để kiểm tra xem một yếu tố cụ thể có được tập trung hay không, ngoài ra, bạn có thể sử dụng các sự kiện, nhưng cách này yêu cầu thiết lập (và có khả năng phá vỡ), và quan trọng là, giả sử trạng thái ban đầu :
var input_focused = false;
input.addEventListener("focus", function() {
input_focused = true;
});
input.addEventListener("blur", function() {
input_focused = false;
});
Bạn có thể khắc phục giả định trạng thái ban đầu bằng cách sử dụng cách không có sự kiện, nhưng sau đó bạn cũng có thể chỉ sử dụng cách đó.