Bagaimana untuk menetapkan dan mengalih keluar fokus menggunakan jQuery

jQuery ialah perpustakaan JavaScript yang pantas dan ringkas. Ia merangkum tugas JavaScript yang biasa digunakan, menjadikannya lebih mudah untuk kami menggunakan JavaScript untuk menyelesaikan pelbagai operasi. Dalam aplikasi web, fokus ialah konsep yang sangat penting, ia mewakili elemen mana pada halaman yang berinteraksi dengan pengguna. Dalam artikel ini, kami akan memberi tumpuan kepada cara menetapkan dan mengalih keluar fokus menggunakan jQuery.

1. Tetapkan fokus

Dalam aplikasi web, biasanya kita perlu menetapkan fokus pada elemen dalam halaman supaya pengguna boleh berinteraksi dengan elemen tersebut. Kes penggunaan yang paling biasa ialah menetapkan fokus apabila halaman dimuatkan. Untuk menetapkan titik fokus, kita boleh menggunakan kaedah .focus() jQuery. Kaedah ini mempunyai dua kegunaan:

1. Pilih elemen dan tetapkan fokus

$('#element').focus();

Dalam contoh ini, kita mula-mula menggunakan jQuery untuk memilih elemen, dan kemudian dalam Panggil kaedah .focus() pada elemen untuk menetapkan fokus.

2. Panggilan rantai

$('#element').addClass('active').focus();

Dalam contoh ini, kita mula-mula memanggil kaedah .addClass() pada elemen untuk menambah kelas CSS, dan kemudian rantai panggilan .focus()Kaedah untuk menetapkan fokus.

Selain menetapkan fokus apabila halaman dimuatkan, kami juga boleh menetapkan fokus secara dinamik semasa pengguna berinteraksi dengan halaman. Sebagai contoh, kita mungkin mahu menetapkan fokus kepada kotak input apabila pengguna mengklik butang. Untuk mencapai kesan ini, kita boleh menggunakan fungsi pengendalian acara jQuery:

$('#button').on('click', function() {
  $('#input').focus();
});

Dalam contoh ini, kami menggunakan kaedah .on() untuk menambah pengendali acara klik pada butang. Apabila pengguna mengklik butang, pengendali acara akan memanggil kaedah .focus() pada kotak input untuk menetapkan fokus.

2. Alih keluar fokus

Apabila kita selesai berinteraksi dengan elemen, biasanya kita mahu mengalihkan fokus daripada elemen. Untuk mengalih keluar fokus, kita boleh menggunakan kaedah .blur() jQuery. Kaedah ini mempunyai dua kegunaan:

1. Pilih elemen dan alih keluar fokus

$('#element').blur();

Dalam contoh ini, kita mula-mula memilih elemen menggunakan jQuery, dan kemudian Panggil .blur() kaedah pada elemen ini untuk membuang fokus.

2. Panggilan berantai

$('#element').removeClass('active').blur();

Dalam contoh ini, kami mula-mula memanggil kaedah .removeClass() pada elemen untuk mengalih keluar kelas CSS, dan kemudian merantai panggilan.blur() Kaedah untuk membuang fokus.

Selain mengalih keluar fokus apabila pengguna melengkapkan interaksi dengan elemen, kami juga boleh mengalih keluar fokus secara dinamik apabila pengguna melakukan tindakan lain dengan halaman tersebut. Sebagai contoh, kita mungkin mahu mengalihkan fokus daripada elemen semasa apabila pengguna menekan kekunci Enter. Untuk mencapai kesan ini, kita boleh menggunakan fungsi pengendalian acara jQuery:

$(document).on('keydown', function(event) {
  if (event.keyCode === 13) {
    $(document.activeElement).blur();
  }
});

Dalam contoh ini, kami menggunakan kaedah .on() untuk menambah pengendali acara penekan papan kekunci pada dokumen. Apabila pengguna menekan kekunci Enter, pengendali acara akan memanggil kaedah .blur() pada elemen yang sedang difokuskan untuk mengalih keluar fokus.

Ringkasan:

Dalam artikel ini, kami memperkenalkan cara untuk menetapkan dan mengalih keluar fokus menggunakan jQuery. Untuk menetapkan fokus, kita boleh menggunakan kaedah .focus() untuk memilih elemen dan menetapkan fokus, atau menetapkan fokus secara dinamik dalam pengendali acara. Untuk mengalih keluar fokus, kita boleh menggunakan kaedah .blur() untuk memilih elemen dan mengalih keluar fokus, atau mengalih keluar fokus secara dinamik dalam pengendali acara. Teknologi ini boleh membantu kami mengurus fokus dalam aplikasi web dengan lebih baik dan meningkatkan pengalaman interaksi pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan dan mengalih keluar fokus menggunakan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!