Pertanyaan Bagaimana cara mengetahui elemen DOM mana yang memiliki fokus?


Saya ingin mencari tahu, di Javascript, elemen mana yang saat ini memiliki fokus. Saya telah melihat melalui DOM dan belum menemukan apa yang saya butuhkan. Apakah ada cara untuk melakukan ini, dan bagaimana caranya?

Alasan saya mencari ini:

Saya mencoba membuat kunci seperti panah dan enter menavigasi melalui tabel elemen input. Tab berfungsi sekarang, tetapi masukkan dan panah tidak secara default tampaknya. Saya sudah menyiapkan bagian penanganan kunci tetapi sekarang saya perlu mencari tahu bagaimana memindahkan fokus ke fungsi penanganan event.


1038
2018-01-30 20:21


asal


Jawaban:


Menggunakan document.activeElement, didukung di semua browser utama.

Sebelumnya, jika Anda mencoba mencari tahu bidang formulir apa yang memiliki fokus, Anda tidak bisa. Untuk meniru deteksi dalam browser yang lebih lama, tambahkan penangan acara "fokus" ke semua bidang dan catat bidang yang difokuskan terakhir dalam variabel. Tambahkan pengendali "blur" untuk menghapus variabel pada peristiwa buram untuk bidang yang terakhir difokuskan.

Tautan yang berhubungan:


1222
2018-01-30 20:34



Seperti yang dikatakan oleh JW, Anda tidak dapat menemukan elemen terfokus saat ini, setidaknya dengan cara yang bebas browser. Tetapi jika aplikasi Anda hanya IE (beberapa ...), Anda dapat menemukannya dengan cara berikut:

document.activeElement

EDIT: Sepertinya IE tidak memiliki semua yang salah, ini adalah bagian dari draft HTML5 dan sepertinya didukung oleh versi terbaru Chrome, Safari dan Firefox setidaknya.


106
2017-08-27 17:33



Jika Anda dapat menggunakan jQuery, sekarang mendukung: fokus, pastikan Anda menggunakan versi 1.6+.

Pernyataan ini akan memberi Anda elemen yang saat ini difokuskan.

$(":focus")

Dari: Bagaimana cara memilih elemen yang fokus padanya dengan jQuery


77
2017-10-19 13:01



document.activeElement sekarang bagian dari draf kerja HTML5 spesifikasi, tetapi mungkin belum didukung di beberapa browser non-mayor / seluler / lama. Anda dapat jatuh kembali querySelector (jika itu didukung). Ini juga layak disebut itu document.activeElement akan kembali document.body jika tidak ada elemen yang difokuskan - bahkan jika jendela browser tidak memiliki fokus.

Kode berikut akan mengatasi masalah ini dan kembali ke querySelector memberikan dukungan yang sedikit lebih baik.

var focused = document.activeElement;
if (!focused || focused == document.body)
    focused = null;
else if (document.querySelector)
    focused = document.querySelector(":focus");

Hal lain yang perlu diperhatikan adalah perbedaan kinerja antara kedua metode ini. Meminta dokumen dengan pemilih akan selalu jauh lebih lambat daripada mengakses activeElement milik. Lihat ini tes jsperf.com.


39
2017-08-06 19:32



document.activeElement mungkin default ke <body> elemen jika tidak ada elemen yang fokus dalam fokus. Selain itu, jika elemen terfokus dan jendela browser menjadi buram, activeElement akan terus memegang elemen yang difokuskan.

Jika salah satu dari kedua perilaku ini tidak diinginkan, pertimbangkan pendekatan berbasis CSS: document.querySelector( ':focus' ).


13
2017-11-29 18:51



Dengan sendirinya, document.activeElement masih dapat mengembalikan elemen jika dokumen tidak terfokus (dan karenanya tidak ada dalam dokumen difokuskan!)

Kamu mungkin menginginkan perilaku itu, atau itu mungkin tidak masalah (mis. dalam a keydown acara), tetapi jika Anda perlu tahu sesuatu sebenarnya terfokus, Anda juga dapat memeriksa document.hasFocus().

Berikut ini akan memberi Anda elemen terfokus 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 suatu spesifik elemen memiliki fokus, lebih sederhana:

var input_focused = document.activeElement === input && document.hasFocus();

Untuk memeriksa apakah apa pun difokuskan, lebih rumit lagi:

var anything_is_focused = (
    document.hasFocus() &&
    document.activeElement !== null &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement
);

Catatan Ketangguhan: Dalam kode tempat ceknya melawan document.body dan document.documentElement, ini karena beberapa browser mengembalikan salah satunya atau null ketika tidak ada yang terfokus.

Ini tidak memperhitungkan jika <body> (atau mungkin <html>) memiliki a tabIndex atribut dan dengan demikian sebenarnya bisa fokus. Jika Anda menulis perpustakaan atau sesuatu dan ingin membuatnya menjadi kuat, Anda mungkin harus mengatasinya.


Berikut ini (berat airquotes) "satu-liner" versi mendapatkan elemen yang terfokus, yaitu secara konseptual lebih rumit karena Anda harus tahu tentang hubungan arus pendek, dan Anda tahu, itu jelas tidak cocok pada satu baris, dengan asumsi Anda ingin dapat dibaca.
Saya tidak akan merekomendasikan yang ini. Tetapi jika Anda adalah 1337 hax0r, idk ... ada di sana.
Anda juga bisa menghapus || null bagian jika Anda tidak keberatan false dalam beberapa kasus. (Kamu masih bisa mendapatkan null jika document.activeElement aku s null):

var focused_element = (
    document.hasFocus() &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement &&
    document.activeElement
) || null;

Untuk memeriksa apakah elemen tertentu terfokus, atau Anda bisa gunakan acara, tetapi cara ini memerlukan penyiapan (dan kemungkinan pemblokiran), 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 sebaiknya menggunakan itu saja.


12
2017-09-08 18:47



Saya menyukai pendekatan yang digunakan oleh Joel S, tetapi saya juga menyukai kesederhanaan document.activeElement. Saya menggunakan jQuery dan menggabungkan keduanya. Browser lama yang tidak mendukung document.activeElement akan menggunakan jQuery.data() untuk menyimpan nilai 'hasFocus'. Peramban baru akan digunakan document.activeElement. Saya berasumsi itu document.activeElement akan memiliki kinerja yang lebih baik.

(function($) {
var settings;
$.fn.focusTracker = function(options) {
    settings = $.extend({}, $.focusTracker.defaults, options);

    if (!document.activeElement) {
        this.each(function() {
            var $this = $(this).data('hasFocus', false);

            $this.focus(function(event) {
                $this.data('hasFocus', true);
            });
            $this.blur(function(event) {
                $this.data('hasFocus', false);
            });
        });
    }
    return this;
};

$.fn.hasFocus = function() {
    if (this.length === 0) { return false; }
    if (document.activeElement) {
        return this.get(0) === document.activeElement;
    }
    return this.data('hasFocus');
};

$.focusTracker = {
    defaults: {
        context: 'body'
    },
    focusedElement: function(context) {
        var focused;
        if (!context) { context = settings.context; }
        if (document.activeElement) {
            if ($(document.activeElement).closest(context).length > 0) {
                focused = document.activeElement;
            }
        } else {
            $(':visible:enabled', context).each(function() {
                if ($(this).data('hasFocus')) {
                    focused = this;
                    return false;
                }
            });
        }
        return $(focused);
    }
};
})(jQuery);

10
2018-02-04 12:36



Helper kecil yang saya gunakan untuk tujuan ini di Mootools:

FocusTracker = {
    startFocusTracking: function() {
       this.store('hasFocus', false);
       this.addEvent('focus', function() { this.store('hasFocus', true); });
       this.addEvent('blur', function() { this.store('hasFocus', false); });
    },

    hasFocus: function() {
       return this.retrieve('hasFocus');
    }
}

Element.implement(FocusTracker);

Dengan cara ini Anda dapat memeriksa apakah elemen memiliki fokus el.hasFocus() asalkan startFocusTracking() telah dipanggil pada elemen yang diberikan.


9
2018-03-10 23:10