Bagaimana untuk mendapatkan dan kehilangan acara fokus dalam jquery

Dalam jquery, anda boleh menggunakan kaedah focus() untuk mendapatkan acara fokus, sintaks "$(selector).focus()"; anda boleh menggunakan kaedah blur() untuk kehilangan acara fokus, sintaks "$(selector).blur ()".

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

Jika terdapat beberapa elemen borang dalam tapak web bahagian hadapan yang membenarkan pengguna mengisi kandungan, kami boleh menggunakan peristiwa fokus dan peristiwa kehilangan fokus dalam JQ untuk memberi pengguna beberapa gesaan. Hari ini kita akan bercakap tentang cara menggunakan acara mendapatkan fokus dan kehilangan fokus di bawah JQuery.

fokus jquery() mendapat acara fokus

kaedah fokus(): Apabila elemen dipilih dengan mengklik tetikus atau diletakkan oleh kekunci tab, elemen akan mendapat fokus.

Sintaks:

$(selector).focus()

Salin

Contoh: Kotak input input menukar warna jidarnya apabila ia mendapat fokus

Sampel kod:

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

Salin

Apabila tetikus bergerak ke input dan mengklik, elemen input akan berubah menjadi bentuk berikut

acara jq focus() akan ditambah CSS kepada gaya input

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

Salin

jquery blur() kehilangan acara fokus

kaedah blur(): Acara kabur berlaku apabila elemen hilang fokus

Sintaks:

$(selector).blur()

Salin

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

Kod sampel:

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

Salin

Hasil larian adalah seperti yang ditunjukkan dalam rajah:

Gunakan jq blur() untuk kehilangan acara fokus 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 kod akan memberikan gesaan jika pengguna memasukkan kurang daripada lima aksara

Kod contoh:

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

Cadangan tutorial berkaitan: Tutorial video jQuery

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan dan kehilangan acara fokus dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!