Bagaimana cara mengetahui elemen DOM mana yang memiliki fokus?

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

Alasan saya mencari ini:

Saya mencoba membuat kunci seperti panah dan entermenavigasi melalui tabel elemen input. Tab berfungsi sekarang, tetapi masuk, dan panah tampaknya tidak secara default. Saya sudah menyiapkan bagian penanganan kunci tetapi sekarang saya harus mencari cara untuk memindahkan fokus pada fungsi penanganan acara.

Gunakan document.activeElement, itu 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 lama, tambahkan pengendali event "fokus" ke semua bidang dan rekam bidang yang terakhir difokuskan dalam suatu variabel. Tambahkan handler "blur" untuk menghapus variabel pada peristiwa blur untuk bidang yang terakhir difokuskan.

Jika Anda perlu menghapus activeElementAnda dapat menggunakan blur; document.activeElement.blur(). Ini akan mengubah activeElementke body.

Tautan yang berhubungan:

• kompatibilitas Browser ActiveElement
• Alternatif jQuery untuk document.activeElement

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

document.activeElement

EDIT: Sepertinya IE tidak memiliki semuanya salah, ini adalah bagian dari konsep HTML5 dan tampaknya didukung oleh versi terbaru dari Chrome, Safari dan Firefox.

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

Pernyataan ini akan memberi Anda elemen yang sedang difokuskan.

$(":focus")

Dari: Cara memilih elemen yang memiliki fokus dengan jQuery

document.activeElementsekarang merupakan bagian dari spesifikasi rancangan HTML5 , tetapi mungkin belum didukung di beberapa peramban non-utama / seluler / yang lebih lama. Anda dapat kembali ke querySelector(jika itu didukung). Perlu juga disebutkan bahwa document.activeElementakan kembali document.bodyjika tidak ada elemen yang difokuskan - bahkan jika jendela browser tidak memiliki fokus.

Kode berikut akan mengatasi masalah ini dan kembali querySelectormemberikan sedikit dukungan yang lebih baik.

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

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

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.

document.activeElementmungkin default ke <body>elemen jika tidak ada elemen yang bisa fokus dalam fokus. Selain itu, jika elemen difokuskan dan jendela browser buram,activeElement akan terus menahan elemen fokus.

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

Saya menyukai pendekatan yang digunakan oleh Joel S, tetapi saya juga suka kesederhanaannya document.activeElement. Saya menggunakan jQuery dan menggabungkan keduanya. Browser lama yang tidak mendukung document.activeElementakan digunakan jQuery.data()untuk menyimpan nilai 'hasFocus'. Browser yang lebih baru akan digunakan document.activeElement. Saya berasumsi bahwa document.activeElementakan 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);

Seorang pembantu kecil yang saya gunakan untuk keperluan 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.

JQuery mendukung :focuspseudo-class saat ini. Jika Anda mencarinya di dokumentasi JQuery, centang di bawah "Selectors" di mana ia mengarahkan Anda ke dokumen CSS W3C . Saya sudah menguji dengan Chrome, FF, dan IE 7+. Perhatikan bahwa agar berfungsi di IE, <!DOCTYPE...harus ada di halaman html. Berikut adalah contoh dengan asumsi Anda telah menetapkan id ke elemen yang memiliki fokus:

$(":focus").each(function() {
  alert($(this).attr("id") + " has focus!");
});

Jika Anda ingin mendapatkan objek yang instance Element, Anda harus menggunakan document.activeElement, tetapi jika Anda ingin mendapatkan objek yang instance Text, Anda harus menggunakandocument.getSelection().focusNode .

Semoga membantu.

Ada potensi masalah dengan menggunakan document.activeElement. Mempertimbangkan:

<div contentEditable="true">
  <div>Some text</div>
  <div>Some text</div>
  <div>Some text</div>
</div>

Jika pengguna berfokus pada div-dalam, maka document.activeElement masih merujuk div luar. Anda tidak dapat menggunakan document.activeElement untuk menentukan fokus div dalam mana.

Fungsi berikut menyiasatinya, dan mengembalikan simpul fokus:

function active_node(){
  return window.getSelection().anchorNode;
}

Jika Anda lebih suka mendapatkan elemen fokus, gunakan:

function active_element(){
  var anchor = window.getSelection().anchorNode;
  if(anchor.nodeType == 3){
        return anchor.parentNode;
  }else if(anchor.nodeType == 1){
        return anchor;
  }
}

Saya telah menemukan potongan berikut berguna ketika mencoba menentukan elemen mana yang saat ini memiliki fokus. Salin yang berikut ke konsol browser Anda, dan setiap detik akan mencetak detail elemen saat ini yang memiliki fokus.

setInterval(function() { console.log(document.querySelector(":focus")); }, 1000);

Jangan ragu untuk memodifikasi console.loguntuk keluar sesuatu yang berbeda untuk membantu Anda menentukan dengan tepat elemen jika mencetak seluruh elemen tidak membantu Anda menentukan dengan tepat elemen.

Membaca jawaban lain, dan mencoba sendiri, tampaknya document.activeElementakan memberi Anda elemen yang Anda butuhkan di sebagian besar browser.

Jika Anda memiliki browser yang tidak mendukung document.activeElement jika Anda memiliki jQuery, Anda harus dapat mengisinya pada semua acara fokus dengan sesuatu yang sangat sederhana seperti ini (belum teruji karena saya tidak memiliki browser yang memenuhi kriteria tersebut untuk diberikan. ):

if (typeof document.activeElement === 'undefined') { // Check browser doesn't do it anyway
  $('*').live('focus', function () { // Attach to all focus events using .live()
    document.activeElement = this; // Set activeElement to the element that has been focussed
  });
}

Jika Anda menggunakan jQuery, Anda dapat menggunakan ini untuk mengetahui apakah suatu elemen aktif:

$("input#id").is(":active");

Dengan dojo, Anda dapat menggunakan dijit.getFocus ()

Hanya dengan menempatkan ini di sini untuk memberikan solusi, saya akhirnya menemukan.

Saya membuat properti bernama document.activeInputArea, dan menggunakan addon HotKeys jQuery untuk menjebak acara keyboard untuk tombol panah, tab dan enter, dan saya membuat pengendali event untuk mengklik ke elemen input.

Lalu saya menyesuaikan activeInputArea setiap kali fokus berubah, jadi saya bisa menggunakan properti itu untuk mencari tahu di mana saya berada.

Sangat mudah untuk mengacaukan ini, karena jika Anda memiliki bug dalam sistem dan fokus tidak sesuai dengan yang Anda pikirkan, maka sangat sulit untuk mengembalikan fokus yang benar.