Bagaimana saya tahu elemen DOM mana yang memiliki fokus?

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

Saya mencari ini:

Saya mencoba membuat tombol seperti panah, dan enter menavigasi melalui tabel elemen input. Sekarang tab berfungsi, tetapi input dan panah secara default tidak ditampilkan. Saya memiliki bagian dari penanganan kunci, tetapi sekarang saya harus mencari cara untuk memindahkan fokus dalam fungsi penanganan acara.

931
30 янв. Tony Peterson ditetapkan pada 30 Januari 2009-01-30 23:21 '09 pada 11:21 PM 2009-01-30 23:21
@ 18 jawaban

Gunakan document.activeElement , didukung di semua browser utama.

Sebelumnya, jika Anda mencoba mencari tahu bidang mana dari formulir terkonsentrasi, Anda tidak bisa. Untuk meniru deteksi di browser lama, tambahkan pengendali event "fokus" ke semua bidang dan rekam bidang dengan fokus terakhir dalam suatu variabel. Tambahkan handler "blur" untuk menghapus variabel pada acara blur untuk bidang dengan fokus terakhir.

Tautan Terkait:

1083
Jawabannya diberikan oleh JW. 30 Januari 2009-01-30 23:24 '09 pada 23:24 2009-01-30 23:24

Seperti yang dikatakan JW, Anda tidak dapat menemukan elemen fokus saat ini, setidaknya secara terpisah dari browser. Tetapi jika aplikasi Anda hanya IE (beberapa di antaranya ...), Anda dapat menemukannya sebagai berikut:

 document.activeElement 

EDIT: Tampaknya IE tidak memiliki masalah, itu bagian dari konsep HTML5, dan tampaknya didukung oleh versi terbaru dari Chrome, Safari, dan Firefox.

100
30 янв. jawabannya diberikan Wookai 30 Jan 2009-01-30 23:34 '09 pada 23:34 2009-01-30 23:34

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

Operator ini akan memberi Anda item yang saat ini difokuskan.

 $(":focus") 

Dari: Cara memilih elemen yang difokuskan menggunakan jQuery

73
27 авг. balasan yang diberikan oleh William Denniss 27 Agustus 2011-08-27 20:33 '11 pada 20:33 2011-08-27 20:33

document.activeElement sekarang menjadi bagian dari spesifikasi HTML5 dari draft kerja , tetapi mungkin belum didukung di beberapa browser yang tidak mendukung basic / mobile / old. Anda dapat kembali ke querySelector (jika didukung). Perlu juga dicatat bahwa document.activeElement akan mengembalikan 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 sedikit dukungan yang lebih baik.

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

Selain itu, perlu dicatat perbedaan kinerja antara kedua metode. Meminta dokumen menggunakan penyeleksi akan selalu jauh lebih lambat daripada mengakses properti activeElement . Lihat Tes Ini jsperf.com .

36
19 окт. jawabannya diberikan oleh Andy E 19 Oktober. 2011-10-19 16:01 '11 pada 16:01 2011-10-19 16:01

document.activeElement dapat menggunakan elemen <body> secara default jika tidak ada elemen yang dapat difokuskan. Selain itu, jika elemen difokuskan dan jendela browser buram, activeElement akan terus menahan elemen fokus.

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

11
06 авг. balasan yang diberikan oleh Nate Whittaker 06 Agustus 2014-08-06 22:32 '14 pada 10:32 malam 2014-08-06 22:32

Saya menyukai pendekatan yang diambil 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'. Browser yang lebih baru akan menggunakan document.activeElement . Saya menganggap bahwa 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
08 сент. Balas ke Jason Sep 08 2010-09-08 21:47 '10 pada 21:47 2010-09-08 21:47

Seorang asisten 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 tersebut fokus dengan el.hasFocus() , asalkan startFocusTracking() dipanggil untuk elemen ini.

9
04 февр. jawabannya diberikan oleh Joel S 04 Feb. 2010-02-04 15:36 '10 pada 15:36 2010-02-04 15:36

JQuery mendukung pseudo-class :focus dibandingkan dengan yang sekarang. Jika Anda mencarinya di dokumentasi jQuery, periksa bagian "Selectors" di mana ia menunjuk ke dokumen CSS W3C . Saya menguji Chrome, FF dan IE 7+. Harap dicatat bahwa untuk bekerja di IE pada halaman html harus ada <!DOCTYPE... Berikut adalah contoh yang mengasumsikan bahwa Anda menetapkan pengidentifikasi ke elemen dengan fokus:

 $(":focus").each(function() { alert($(this).attr("id") + " has focus!"); }); 
7
11 марта '11 в 2:10 2011-03-11 02:10 jawabannya diberikan oleh DeezCashews pada 11 Maret '11 di 2:10 2011-03-11 02:10

Ada potensi masalah dengan menggunakan document.activeElement. Pertimbangkan:

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

Jika pengguna berfokus pada internal-div, maka document.activeElement masih mengacu pada div eksternal. Anda tidak dapat menggunakan document.activeElement untuk menentukan div internal mana yang memiliki fokus.

Fungsi berikut berjalan di sekitar ini dan mengembalikan titik fokus:

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

Jika Anda lebih suka mendapatkan item yang fokus, gunakan:

 function active_element(){ var anchor = window.getSelection().anchorNode; if(anchor.nodeType == 3){ return anchor.parentNode; }else if(anchor.nodeType == 1){ return anchor; } } 
5
01 марта '15 в 10:36 2015-03-01 10:36 Jawaban diberikan oleh Nathan K pada 01 Maret '15 di 10:36 2015-03-01 10:36

Setelah membaca jawaban lain dan mencobanya sendiri, sepertinya document.activeElement akan memberi Anda elemen yang Anda butuhkan di sebagian besar browser.

Jika Anda memiliki browser yang tidak mendukung document.activeElement, jika Anda memiliki jQuery, Anda dapat mengisinya di semua acara fokus dengan sesuatu yang sangat sederhana (belum diuji, karena saya tidak memiliki browser, kriteria untuk pengiriman):

 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 }); } 
5
05 авг. jawabannya diberikan rjmunro 05 Agustus. 2011-08-05 02:20 '11 pada 2:20 2011-08-05 02:20

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

Saya harap ini membantu.

5
17 июля '16 в 8:52 2016-07-17 08:52 jawabannya diberikan rplaurindo 17 Juli '16 di 8:52 2016-07-17 08:52

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

 $("input#id").is(":active"); 
5
14 февр. Jawabannya diberikan oleh Arne pada 14 Februari. 2012-02-14 22:29 '12 jam 10:29 malam 2012-02-14 22:29

document.activeElement sendiri dapat mengembalikan elemen jika dokumen tidak fokus. Anda mungkin menginginkan perilaku ini, tetapi jika tidak, Anda dapat memeriksa document.hasFocus() :

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

Untuk memeriksa apakah elemen tertentu memiliki fokus:

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

Atau, Anda dapat menggunakan acara, tetapi ini membutuhkan instalasi dan mengasumsikan keadaan awal:

 var input_focused = false; input.addEventListener("focus", function() { input_focused = true; }); input.addEventListener("blur", function() { input_focused = false; }); 
5
29 нояб. jawabannya diberikan 1j01 29 Nov. 2016-11-29 21:51 '16 pada 21:51 2016-11-29 21:51

Dengan dojo, Anda dapat menggunakan dijit.getFocus ()

4
13 янв. Balas diberikan oleh Daniel Hartmann pada 13 Jan 2012-01-13 14:55 '12 pada 14:55 2012-01-13 14:55

Taruh saja di sini untuk memberikan solusi, yang akhirnya saya dapatkan.

Saya membuat properti document.activeInputArea dan menggunakan add-on jQuery HotKeys untuk memblokir acara keyboard untuk tombol panah, tab, dan input, dan saya membuat pengendali event untuk mengklik elemen input.

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

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

3
18 мая '09 в 15:48 2009-05-18 15:48 dijawab oleh Tony Peterson pada 18 Mei 2009 pada 15:48 2009-05-18 15:48

Cara yang hampir tidak bergantung pada browser untuk mencapai ini telah dilakukan oleh Quirksmode sejak lama. Mungkin ada masalah dengan Safari, karena Safari tidak selalu mengatur acara pada elemen yang sama seperti Chrome atau Firefox. Kadang-kadang Safari bahkan mengatur acara pada bidang teks alih-alih elemen yang mengandung. Ini dapat diperbaiki setelah beberapa waktu (dengan memeriksa nodeType).

Ini dia:

  function getFocus(e){ var focused; if (!e) var e = window.event; if (e.target) focused = e.target; else if (e.srcElement) focused = e.srcElement; if (focused.nodeType == 3) focused = focused.parentNode; if (document.querySelector) { return focused.id; } else if (!focused || focused == document.documentElement) { return focused; } } 

Semoga ini bisa membantu.


Terima kasih, Quirksmode

2
04 июля '17 в 16:57 2017-07-04 16:57 Jawaban diberikan oleh fred heuvel pada 04 Juli '17 pada 16:57 2017-07-04 16:57

Google Chrome (setidaknya hingga 33) memiliki kesalahan yang mengganggu dengan document.activeElement : document.activeElement undefined telah undefined . Saya belum menguji browser berbasis webkit lain, mungkin juga terpengaruh.

1
05 дек. Balas diberikan oleh Duan Yao 05 Des 2017-12-05 01:03 '17 pada 1:03 2017-12-05 01:03

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

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

Jangan ragu untuk memodifikasi console.log untuk menampilkan sesuatu yang lain untuk membantu Anda menentukan item yang tepat jika daftar seluruh item tidak membantu Anda mengidentifikasi item.

0
20 окт. Jawabannya diberikan vegemite4me 20 Oktober. 2017-10-20 14:20 '17 pukul 14.20 2017-20-20 14:20

Pertanyaan lain tentang tag atau Ajukan Pertanyaan