Bagaimana Anda menghapus fokus dalam javascript?

159

Saya tahu ini seharusnya tidak terlalu sulit, tetapi saya tidak dapat menemukan jawabannya di Google.

Saya ingin mengeksekusi sepotong javascript yang akan menghapus fokus dari elemen apa pun itu tanpa mengetahui sebelumnya elemen mana yang menjadi fokus. Ini harus bekerja pada firefox 2 dan juga browser yang lebih modern.

Apakah ada cara yang baik untuk melakukan ini?

javascript focus

— Andres
sumber

apa yang dimaksud dengan fokus jelas? - apakah sama dengan blur?

— plodder

3

Saya ingin membuatnya sehingga tidak ada elemen di browser yang fokus.

— Andres

170

Menjawab: document.activeElement

Untuk melakukan apa yang Anda inginkan, gunakan document.activeElement.blur()

Jika Anda perlu mendukung Firefox 2, Anda juga dapat menggunakan ini:

function onElementFocused(e)
{
    if (e && e.target)
        document.activeElement = e.target == document ? null : e.target;
} 

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);

— jps
sumber

8

Jika Firefox 2, dengan pangsa browser 0,66%, adalah pemecah kesepakatan ... Saya memiliki perbaikan, yang ada dalam jawaban yang diedit.

— jps

21

Pada tahun 2013, pangsa browser Firefox 2 secara substansial kurang dari 0,66%, dan sederhana document.activeElement.blur()adalah cara terbaik untuk mencapai efek ini.

— chowey

88

.focus()dan kemudian .blur()sesuatu yang sewenang-wenang di halaman Anda. Karena hanya satu elemen yang dapat memiliki fokus, itu ditransfer ke elemen itu dan kemudian dihapus.

— Kevin Reid
sumber

Apakah ada cara untuk membuat elemen tak terlihat yang memiliki fokus?

— Andres

1

Saya bukan ahli tentang cara terbaik untuk melakukan itu; tetapi Anda tentu bisa memposisikannya di luar layar atau di luar batas overflow: clipelemen gaya. Tapi Anda bisa menggunakan bidang yang sudah ada di halaman. Atau buat satu hanya untuk tujuan itu dan hapus lagi.

— Kevin Reid

Saya pikir pengaturan fokus ke elemen di luar layar akan memaksa gulir ke elemen itu. Namun, Anda dapat membuat elemen yang tidak terlihat untuk tujuan tersebut. Yang sedang berkata, beberapa browser mungkin memiliki waktu yang sulit untuk menghapus tanda sisipan. Hanya blur () mungkin akan bekerja lebih baik. Anda masih bisa mendapatkan kunci dengan pengendali event keyup (keydown).

— Alexis Wilke

5

Jawaban ini kedaluwarsa dan tidak berlaku di tahun 2017. Sebaliknya, gunakan activeElement, seperti di stackoverflow.com/a/2520670/39808

— Paul Fisher

Ini masih berfungsi, lebih lama dan memindahkan fokus (yang dapat mengganggu navigasi TAB) Juga tidak segera jelas apa yang seharusnya menjadi "sesuatu yang sewenang-wenang".

— user202729

50

document.activeElement.blur();

Berfungsi salah pada IE9 - ini mengaburkan seluruh jendela browser jika elemen aktif adalah badan dokumen. Lebih baik memeriksa kasus ini:

if (document.activeElement != document.body) document.activeElement.blur();

— pwnzor1337
sumber

Itu benar, tetapi hari ini hampir tidak ada yang menggunakan IE9 lagi.

— Donald Duck

18

Tidak ada jawaban yang diberikan di sini yang sepenuhnya benar ketika menggunakan TypeScript, karena Anda mungkin tidak tahu jenis elemen yang dipilih.

Karena itu ini akan lebih disukai:

if (document.activeElement instanceof HTMLElement)
    document.activeElement.blur();

Saya selanjutnya akan mengecilkan hati menggunakan solusi yang disediakan dalam jawaban yang diterima, karena kekaburan yang dihasilkan bukan bagian dari spesifikasi resmi, dan bisa pecah kapan saja.

— wilcobrouwer
sumber

6

Sangat menyenangkan melihat bagaimana pertanyaan yang saya tanyakan di tahun 2010 terus memiliki jawaban yang berkembang.

— Andres

2

dummyElem.focus () di mana dummyElem adalah objek tersembunyi (mis. memiliki zIndex negatif)?

— tukang plodder
sumber

0

Anda dapat memanggil window.focus ();

tetapi memindahkan atau kehilangan fokus terikat untuk mengganggu siapa pun yang menggunakan tombol tab untuk berkeliling halaman.

Anda dapat mendengarkan kode kunci 13, dan mengabaikan efeknya jika tombol tab ditekan.

— kennebec
sumber

-3

Dengan jQuery saja: $(this).blur();

— bsbak
sumber

2

Ini adalah jawaban lama sehingga Anda mungkin tahu sekarang, tetapi ada dua alasan jawaban ini tidak berlaku. 1. Diasumsikan OP menggunakan jquery, 2. thisperlu elemen fokus, sementara pertanyaannya secara eksplisit menyatakan OP tidak tahu elemen fokus sebelumnya.

— Brandon