Bagaimana cara mengetahui elemen DOM memiliki fokus?

Saya ingin mencari tahu, dalam JavaScript, elemen yang saat ini memiliki fokus. I've telah mencari melalui DOM dan modern't menemukan apa yang saya butuhkan, namun. Apakah ada cara untuk melakukan hal ini, dan bagaimana?

Alasan saya sedang mencari ini:

I'm mencoba untuk membuat tombol suka panah dan enter menavigasi melalui tabel input elemen. Tab bekerja sekarang, tetapi masuk, dan panah tidak secara default tampaknya. I'sudah punya kuncinya penanganan bagian set up tapi sekarang aku perlu mencari tahu bagaimana untuk memindahkan fokus lebih dalam hal penanganan fungsi.

Luca Kiebel
Pertanyaan edit 13 September 2018 в 10:25
Pemrograman
javascript dom
30 Januari 2009 в 8:21
8 tayangan
Mengomentari pertanyaan (1)
Larutan

Gunakan dokumen.activeElement, hal ini didukung di semua browser utama.

Sebelumnya, jika anda mencoba untuk mencari tahu apa bentuk bidang fokus, anda tidak bisa. Untuk meniru deteksi dalam browser lama, tambahkan "fokus" event handler untuk semua bidang dan catatan terakhir yang berfokus pada bidang dalam sebuah variabel. Menambahkan "blur" handler untuk menghapus variabel pada sebuah acara blur untuk yang terakhir-fokus bidang.

Link terkait:

diralik
Jawaban edit 23 Desember 2017 в 2:39
Komentar (11)

Seperti yang dikatakan oleh JW, anda dapat't menemukan saat ini difokuskan elemen, setidaknya dalam browser-cara independen. Tapi jika aplikasi anda YAITU hanya (beberapa...), anda dapat menemukannya dengan cara berikut :

document.activeElement

EDIT: sepertinya IE tidak memiliki segala sesuatu yang salah setelah semua, ini adalah bagian dari rancangan HTML5 dan tampaknya akan didukung oleh versi terbaru dari Chrome, Safari dan Firefox setidaknya.

Wookai
Jawaban edit 18 Oktober 2011 в 4:50
Komentar (8)

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

Pernyataan ini akan membuat anda yang saat ini difokuskan elemen.

$(":focus")

Dari: https://stackoverflow.com/questions/516152/how-to-select-an-element-that-has-focus-on-it-with-jquery/2061798#2061798

Community
Jawaban edit 23 Mei 2017 в 12:26
Komentar (1)

dokumen.activeElement sekarang bagian dari HTML5 kerja draft keterangan, tapi mungkin belum didukung di beberapa non-utama/mobile/browser lama. Anda dapat jatuh kembali ke querySelector (jika didukung). It's juga layak disebutkan bahwa dokumen.activeElement akan kembali dokumen.tubuh jika tidak ada elemen yang fokus — bahkan jika jendela browser doesn't memiliki fokus.

Kode berikut akan mengatasi masalah ini dan jatuh 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 hal yang perlu diperhatikan adalah perbedaan kinerja antara dua metode. Query dokumen dengan penyeleksi akan selalu jauh lebih lambat daripada mengakses activeElement properti. Melihat ini jsperf.com tes.

Komentar (0)

Dengan sendirinya, dokumen.activeElement masih bisa kembali elemen jika dokumen isn't terfokus (dan dengan demikian tidak ada dalam dokumen fokus!)

Anda mungkin * ingin bahwa perilaku, atau mungkin* tidak peduli (misalnya hanya keydown event), tetapi jika anda perlu untuk mengetahui sesuatu adalah benar-benar fokus, selain itu anda dapat cek [dokumen.hasFocus()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus).

Berikut ini akan memberikan anda fokus elemen jika ada satu, 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 spesifik elemen memiliki fokus,'s sederhana:

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

Untuk memeriksa apakah apapun ** terfokus, it's lebih kompleks lagi:

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

Robustness Catatan: Dalam kode di mana pemeriksaan terhadap dokumen.tubuhdandokumen.documentElement, hal ini karena beberapa browser kembali salah satu ataunull` ketika tidak ada yang fokus.

Itu doesn't account jika <body> (atau mungkin <html>) memiliki tabIndex atribut dan dengan demikian benar-benar bisa fokus. Jika anda're menulis sebuah perpustakaan atau sesuatu dan ingin menjadi kuat, anda mungkin harus menangani itu entah bagaimana.

Berikut ini's (berat airquotes) "satu-liner" versi mendapatkan fokus elemen, yang ini secara konseptual lebih rumit karena anda harus tahu tentang hubungan arus pendek, dan y'tahu, jelas-jelas itu doesn't cocok pada satu baris, dengan asumsi anda ingin untuk dapat dibaca. I'm tidak akan merekomendasikan yang satu ini. Tapi jika anda're 1337 hax0r, idk... itu's ada. Anda juga bisa menghapus || null bagian jika anda don't keberatan palsu dalam beberapa kasus. (Anda masih bisa mendapatkan null jika dokumen.activeElement adalah nol):

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

Untuk memeriksa apakah elemen tertentu adalah fokus, atau anda bisa menggunakan peristiwa, namun cara ini membutuhkan setup (dan berpotensi teardown), dan yang lebih 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 keadaan awal asumsi dengan menggunakan non-evented cara, tapi kemudian anda mungkin juga hanya menggunakan itu sebagai gantinya.

1j01
Jawaban edit 1 Februari 2018 в 10:29
Komentar (0)

dokumen.activeElement mungkin default ke <body> elemen jika tidak ada focusable unsur-unsur yang berada dalam fokus. Selain itu, jika elemen adalah fokus dan jendela browser yang kabur, activeElement akan terus fokus elemen.

Jika salah satu dari dua perilaku yang tidak diinginkan, mempertimbangkan CSS berbasis pendekatan: dokumen.querySelector( &#39;:fokus&#39; ).

Komentar (2)

Saya menyukai pendekatan yang digunakan oleh Joel S, tapi aku juga menyukai kesederhanaan dokumen.activeElement. Saya menggunakan jQuery dan gabungan keduanya. Browser lama yang don't dukungan dokumen.activeElement akan menggunakan jQuery.data() untuk menyimpan nilai 'hasFocus'. Browser yang lebih baru akan menggunakan dokumen.activeElement. Saya berasumsi bahwa dokumen.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);
Komentar (2)

Pembantu kecil yang saya've digunakan 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 dengan el.hasFocus() asalkan startFocusTracking() telah disebut pada elemen tertentu.

Bonifacio2
Jawaban edit 22 Juli 2014 в 12:18
Komentar (0)

JQuery tidak mendukung :fokus pseudo-kelas seperti saat ini. Jika anda mencari untuk itu dalam JQuery dokumentasi, cek di bawah "Penyeleksi" di mana poin anda ke W3C CSS docs. I've diuji dengan Chrome, FF, dan IE 7+. Perhatikan bahwa untuk itu untuk bekerja di IE, <!DOCTYPE... harus ada pada halaman html. Berikut adalah contoh asumsi anda've diberikan sebuah id untuk unsur yang memiliki fokus:

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

Jika anda ingin mendapatkan sebuah objek yang merupakan instance dari Elemen, anda harus menggunakan dokumen.activeElement, tetapi jika anda ingin mendapatkan sebuah objek yang merupakan instance dari Teks, anda harus menggunakan dokumen.getSelection().focusNode.

Saya berharap yang membantu.

rplaurindo
Jawaban edit 16 September 2017 в 7:12
Komentar (11)

Ada potensi masalah dengan menggunakan dokumen.activeElement. Pertimbangkan:

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

Jika pengguna berfokus pada batin-div, maka dokumen.activeElement masih referensi luar div. Anda tidak dapat menggunakan dokumen.activeElement untuk menentukan mana dari batin div's memiliki fokus.

Berikut fungsi mendapatkan sekitar ini, dan kembali fokus node:

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

Jika anda lebih suka mendapatkan fokus elemen, gunakan:

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

Jika anda're menggunakan jQuery, anda dapat menggunakan ini untuk mengetahui apakah suatu elemen aktif:

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

Membaca jawaban yang lain, dan mencoba sendiri, tampaknya dokumen.activeElement akan memberikan elemen yang anda butuhkan di sebagian besar browser.

Jika anda memiliki browser yang doesn't mendukung dokumen.activeElement jika anda memiliki jQuery di sekitar, anda harus dapat mengisi semua fokus peristiwa dengan sesuatu yang sangat sederhana seperti ini (belum teruji sebagai I don't memiliki browser memenuhi kriteria tersebut ke tangan):

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
  });
}
Komentar (0)

Dengan dojo, anda dapat menggunakan dijit.getFocus()

Komentar (0)

Saya telah menemukan berikut cuplikan yang akan berguna ketika mencoba untuk menentukan elemen yang saat ini memiliki fokus. Salin kode berikut ke dalam konsol browser anda, dan setiap detik itu akan mencetak rincian dari elemen saat ini yang memiliki fokus.

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

Merasa bebas untuk memodifikasi konsol.log untuk log out sesuatu yang berbeda untuk membantu anda menentukan elemen jika mencetak seluruh elemen tidak membantu anda menentukan unsur.

Komentar (0)

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

Saya membuat sebuah properti yang disebut dokumen.activeInputArea, dan menggunakan jQuery's HotKeys addon untuk menjebak peristiwa keyboard untuk tombol panah, tab dan enter, dan saya membuat event handler untuk mengklik ke elemen masukan.

Kemudian saya sesuaikan activeInputArea setiap waktu fokus berubah, jadi saya bisa menggunakan properti tersebut untuk mencari tahu di mana aku berada.

It's mudah untuk mengacaukan ini meskipun, karena jika anda memiliki bug dalam sistem dan fokus isn't di mana anda pikir itu, maka sangat sulit untuk mengembalikan fokus yang benar.

Komentar (0)