Dengan sendirinya, document.activeElementmasih dapat mengembalikan elemen jika dokumen tidak fokus (dan dengan demikian tidak ada dalam dokumen yang difokuskan!)
Anda mungkin menginginkan perilaku itu, atau mungkin tidak masalah (misalnya dalam suatu keydownacara), tetapi jika Anda perlu tahu ada sesuatu yang benar-benar fokus, Anda juga dapat memeriksanya document.hasFocus().
Berikut ini akan memberi Anda elemen fokus jika ada, atau yang lain null.
var focused_element = null;
if (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
) {
focused_element = document.activeElement;
}
Untuk memeriksa apakah elemen tertentu memiliki fokus, lebih sederhana:
var input_focused = document.activeElement === input && document.hasFocus();
Untuk memeriksa apakah ada yang fokus, lebih kompleks lagi:
var anything_is_focused = (
document.hasFocus() &&
document.activeElement !== null &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
);
Catatan Robustness : Dalam kode di mana ia mengecek document.bodydan document.documentElement, ini karena beberapa browser mengembalikan salah satunya atau nullketika tidak ada yang difokuskan.
Itu tidak menjelaskan apakah <body>(atau mungkin <html>) memiliki tabIndexatribut dan dengan demikian bisa benar-benar fokus . Jika Anda sedang menulis perpustakaan atau sesuatu dan ingin menjadi kuat, Anda mungkin harus menanganinya.
Ini versi (satu airquotes berat ) "satu-liner" untuk mendapatkan elemen fokus, yang secara konsep lebih rumit karena Anda harus tahu tentang hubungan arus pendek, dan Anda tahu, itu jelas tidak cocok pada satu baris, dengan asumsi Anda ingin itu dapat dibaca.
Saya tidak akan merekomendasikan yang ini. Tetapi jika Anda 1337 hax0r, idk ... itu ada di sana.
Anda juga dapat menghapus || nullbagian jika Anda tidak keberatan falsedalam beberapa kasus. (Kamu masih bisa mendapatkannyanull jika document.activeElementadalah null):
var focused_element = (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement &&
document.activeElement
) || null;
Untuk memeriksa apakah elemen tertentu difokuskan, Anda juga bisa menggunakan acara, tetapi cara ini memerlukan pengaturan (dan berpotensi runtuh), dan yang penting, mengasumsikan keadaan awal :
var input_focused = false;
input.addEventListener("focus", function() {
input_focused = true;
});
input.addEventListener("blur", function() {
input_focused = false;
});
Anda bisa memperbaiki asumsi keadaan awal dengan menggunakan cara yang tidak terjadi, tetapi kemudian Anda bisa saja menggunakannya.