Rumah > Artikel > hujung hadapan web > Apakah acara fokus jquery?
Terdapat dua peristiwa fokus jquery: 1. Fokus mendapat acara fokus Anda boleh menggunakan kaedah fokus() untuk mencetuskan acara fokus, atau menentukan fungsi pemprosesan acara untuk dijalankan apabila acara fokus berlaku sintaks "$( pemilih).fokus(fungsi)". 2. Untuk kehilangan kabur peristiwa fokus, anda boleh menggunakan kaedah blur() untuk mencetuskan peristiwa kabur, atau menentukan fungsi pemprosesan acara untuk dijalankan apabila peristiwa kabur berlaku, dengan sintaks "$(selector).blur(function )".
Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.6, komputer Dell G3.
Terdapat dua peristiwa fokus jquery: memperoleh fokus fokus() dan kehilangan fokus blur().
jquery focus() mendapat acara fokus
Acara fokus berlaku apabila elemen mendapat fokus.
Apabila elemen dipilih dengan klik tetikus atau diletakkan dengan kekunci tab, elemen itu mendapat fokus. Kaedah
fokus() mencetuskan acara fokus, atau menentukan fungsi untuk dijalankan apabila acara fokus berlaku.
Sintaks
//触发 focus 事件 $(selector).focus() //将函数绑定到 focus 事件 $(selector).focus(function)
fungsi: Pilihan. Menentukan fungsi untuk dijalankan apabila peristiwa fokus berlaku.
Contoh: kaedah focus() mendapat fokus
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-3.6.1.min.js"></script> <script> $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); }); </script> </head> <body> 输入你的名字: <input type="text"> </body> </html>
jquery blur() hilang fokus Peristiwa
Peristiwa kabur berlaku apabila elemen kehilangan fokus. Kaedah
blur() mencetuskan peristiwa kabur atau menentukan fungsi untuk dijalankan apabila peristiwa kabur berlaku.
Petua: Kaedah ini sering digunakan bersama dengan kaedah fokus().
Sintaks
//为被选元素触发 blur 事件: $(selector).blur() //添加函数到 blur 事件: $(selector).blur(function)
Contoh: kaedah blur() hilang fokus
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-3.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("input").focus(function() { $("input").css("background-color", "#FFFFCC"); }); $("input").blur(function() { $("input").css("background-color", "#D6D6FF"); }); }); </script> </head> <body> 用户名: <input type="text" /> <p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p> </body> </html>
Gunakan acara fokus jq blur() untuk mengesahkan kandungan yang dimasukkan oleh pengguna
Acara fokus blur() dalam JQuery boleh digunakan untuk menyemak sama ada kandungan yang dimasukkan oleh pengguna dalam kotak input adalah sah , seperti kod berikut, jika pengguna memasukkan kurang daripada lima aksara, gesaan akan diberikan
Kod contoh:
<input type="text" name="" id="mochu"> <script> $('#mochu').blur(function(){ if($(this).val().length < 5){ alert('字数太少了,多输入几个吧'); } }); </script>
[Pembelajaran yang disyorkan: jQuery tutorial video , video bahagian hadapan web]
Atas ialah kandungan terperinci Apakah acara fokus jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!