jquery membatalkan fokus tetikus

Dalam pembangunan bahagian hadapan, selalunya perlu menggunakan fokus tetikus, yang boleh memudahkan pengguna berinteraksi dan mengendalikan halaman. Walau bagaimanapun, dalam beberapa kes, kami mungkin perlu membatalkan fokus tetikus, seperti semasa mereka bentuk pengalaman pengguna tertentu atau apabila kami ingin mengelakkan salah operasi yang tidak disengajakan oleh pengguna.

jQuery ialah perpustakaan JavaScript yang sangat popular Ia menyediakan banyak kaedah operasi DOM dan kaedah pengendalian acara yang mudah, menjadikannya mudah untuk membatalkan fokus tetikus.

Artikel ini akan memperkenalkan secara terperinci kaedah pelaksanaan membatalkan fokus tetikus dalam jQuery, termasuk kaedah asas membatalkan fokus tetikus dan kaedah pelaksanaan yang lebih maju.

1. Kaedah pelaksanaan asas untuk membatalkan fokus tetikus

1.1 Tetapkan atribut tabindex bagi elemen DOM kepada -1

Dalam HTML, gunakan atribut tabindex untuk menentukan tab bagi elemen DOM. Jika anda menetapkannya kepada -1, anda boleh mengalih keluar elemen daripada susunan tab, sekali gus mencapai kesan membatalkan fokus tetikus.

Dalam jQuery, anda boleh menetapkan atribut tabindex dengan menetapkan kaedah attr() elemen DOM, seperti yang ditunjukkan di bawah:

$('selector').attr('tabindex', '-1');

di mana pemilih ialah pemilih elemen DOM yang perlu batalkan fokus tetikus , yang boleh berupa nama elemen, nama kelas, ID, dsb.

1.2 Mensimulasikan peristiwa di luar fokus tetikus

Selain menetapkan atribut tabindex, anda juga boleh menggunakan kaedah mensimulasikan peristiwa luar fokus tetikus untuk membatalkan fokus tetikus.

Dalam jQuery, anda boleh menggunakan kaedah blur() untuk mensimulasikan peristiwa di luar fokus tetikus, seperti yang ditunjukkan di bawah:

$('selector').blur();

Di mana pemilih ialah pemilih elemen DOM yang memerlukan untuk membatalkan fokus tetikus.

Dua kaedah di atas hanya boleh membatalkan fokus tetikus, tetapi kedua-duanya perlu dicetuskan atau ditetapkan secara manual Jika anda perlu membatalkan fokus secara automatik semasa operasi pengguna, anda perlu menggunakan kaedah yang lebih maju.

2. Cara membatalkan fokus tetikus secara automatik

2.1 Klik pada ruang kosong pada halaman untuk membatalkan fokus

Dalam beberapa senario, seperti apabila pengguna mengklik pada ruang kosong pada halaman , kami mungkin ingin mengalih keluar fokus daripada elemen semasa. Ini boleh dicapai dengan mengikat acara klik halaman.

Dalam jQuery, anda boleh menggunakan objek dokumen untuk mengikat acara klik, seperti yang ditunjukkan di bawah:

$(document).on('click', function () {
  $('selector').blur();
});

Antaranya, pemilih ialah pemilih elemen DOM yang perlu membatalkan fokus tetikus . Apabila pengguna mengklik pada ruang kosong pada halaman, peristiwa klik dicetuskan, secara automatik membatalkan fokus tetikus pada elemen semasa.

2.2 Pembatalan fokus oleh papan kekunci dan operasi lain

Dalam sesetengah senario, selain daripada mengklik pada ruang kosong, fokus tetikus juga boleh dibatalkan secara automatik dengan bertindak balas kepada operasi lain seperti papan kekunci input.

Dalam jQuery, anda boleh menggunakan keyup, tukar dan acara lain untuk mendapatkan papan kekunci pengguna atau input operasi lain. Begitu juga, gunakan kaedah blur() untuk membatalkan fokus tetikus secara automatik, seperti ditunjukkan di bawah:

$(document).on('keyup', function () {
  $('selector').blur();
});

Antaranya, keyup ialah peristiwa yang dicetuskan apabila papan kekunci muncul dan pemilih ialah pemilih elemen DOM yang perlu membatalkan fokus tetikus.

Dengan membalas input papan kekunci dan operasi lain, anda boleh menjadikan pembatalan fokus tetikus lebih pintar dan automatik, meningkatkan pengalaman pengguna dan kesan interaksi.

Di atas ialah cara jQuery membatalkan fokus tetikus Sama ada tetapan asas atribut tabindex dan mensimulasikan peristiwa di luar fokus tetikus, atau kaedah yang lebih maju untuk membatalkan fokus tetikus, ia boleh merealisasikan dengan mudah. reka bentuk dan pembangunan pengguna halaman muka hadapan. Dalam pembangunan sebenar, kita boleh memilih cara yang paling sesuai untuk membatalkan fokus tetikus berdasarkan senario dan keperluan tertentu.

Atas ialah kandungan terperinci jquery membatalkan fokus tetikus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!