Adakah jquery mencetuskan sebarang peristiwa apabila mengklik pada input?

Mengklik pada input mencetuskan "acara fokus", yang bermaksud bahawa elemen input dipilih dan boleh dikendalikan, dan garis menegak kecil berkelip pada skrin halaman. Dalam jquery, anda boleh menggunakan kaedah focus() untuk mencetuskan atau mengikat peristiwa fokus kepada elemen, menggunakan sintaks "$(selector).focus()" atau "$(selector).focus(function)".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 3.6.1, komputer Dell G3.

jquery mengklik pada input untuk mencetuskan "acara fokus".

Fokus ialah kawasan yang menjadi perhatian, iaitu kedudukan di mana kursor sedang diaktifkan Garis menegak kecil berkelip dalam skrin halaman menunjukkan bahawa kawalan tertentu pada halaman web adalah dipilih dan boleh dikendalikan. Klik tetikus untuk mendapatkan kursor dan kekunci Tab boleh menukar fokus mengikut set Tabindex.

Sebagai contoh, jika kotak teks input mendapat fokus, anda akan terus memasuki kotak teks input apabila anda mengklik pada elemen input atau jika kotak senarai juntai bawah mendapat fokus, jika anda menekan anak panah ke bawah pada papan kekunci, ia akan Membuat senarai. Program ini juga mempunyai peristiwa yang berlaku apabila fokus diperoleh (gotfocus()), peristiwa yang berlaku apabila fokus hilang (lostfocus()), dan kaedah untuk menetapkan fokus untuk kawalan (setfocus()). Menggunakan fokus yang baik boleh menjadikan program anda kelihatan sangat mesra pengguna.

Acara fokus berlaku apabila elemen mendapat fokus. Elemen menerima fokus apabila ia dipilih dengan klik tetikus atau diletakkan dengan kekunci tab.

jquery focus() memperoleh acara fokus

Kaedah fokus() mencetuskan acara fokus, atau menentukan fungsi untuk dijalankan apabila peristiwa fokus berlaku.

Sintaks:

//触发 focus 事件
$(selector).focus()

//将函数绑定到 focus 事件
$(selector).focus(function)

Contoh: Kotak input input menukar warna jidarnya apabila mendapat fokus

Kod sampel:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).focus(function(){
        $(this).css(&#39;border-color&#39;,&#39;red&#39;);
    });
</script>

Apabila tetikus Apabila dialihkan ke input dan diklik, elemen input akan berubah menjadi bentuk berikut

acara jq focus() akan menambah gaya CSS pada input

<input type="text" name="" id="mochu" style="border-color: red;">

Pengetahuan lanjutan: Kaedah blur() menetapkan peristiwa kehilangan fokus

kaedah blur(): The blur peristiwa berlaku apabila elemen kehilangan fokus

Sintaks:

//触发 blur 事件
$(selector).blur()

//将函数绑定到 blur 事件
$(selector).blur(function)

Contoh: Selepas input kehilangan fokus, kandungan dalam kotak input muncul

Kod sampel:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).blur(function(){ 
    alert($(this).val());    
    });
 </script>

Hasil larian adalah seperti yang ditunjukkan dalam rajah:

Gunakan jq blur() acara fokus hilang untuk mengesahkan input pengguna

blur() kehilangan fokus acara dalam JQuery , kita boleh menggunakannya untuk menyemak sama ada kandungan yang dimasukkan oleh pengguna dalam kotak input input adalah sah sebagai contoh, kod berikut akan memberikan gesaan jika kandungan dimasukkan oleh pengguna adalah kurang daripada lima aksara

Kod sampel:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).blur(function(){
        if($(this).val().length < 5){
            alert(&#39;字数太少了，多输入几个吧&#39;);
        }
    });
</script>

[Pembelajaran yang disyorkan: Tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Adakah jquery mencetuskan sebarang peristiwa apabila mengklik pada input?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!