fokus jquery tidak fokus

jQuery ialah bahasa skrip yang membenarkan pembangun memanipulasi HTML dan CSS dengan menulis kod JavaScript. Ia menyediakan banyak fungsi dan kaedah yang mudah untuk membantu pembangun meningkatkan interaktiviti halaman Web. Antaranya, fokus dan nyahfokus ialah operasi interaktif biasa Artikel ini akan menerangkan penggunaan dan pelaksanaan fokus dan nyahfokus dalam jQuery.

1. Fokus

Dalam pembangunan web, memfokus bermaksud meletakkan kursor tetikus atau papan kekunci pada kotak input atau elemen lain yang boleh diedit untuk menjadikannya elemen "aktif" pada masa ini, anda boleh memasukkan data atau melakukan operasi lain. Dalam jQuery, fungsi fokus boleh dicapai melalui kaedah focus().

Sintaks: $(selector).focus()

Antaranya, pemilih mewakili elemen yang perlu difokuskan, iaitu id, kelas, label dan pemilih lain. Contohnya, untuk memfokus pada elemen dengan id input, anda boleh menggunakan kod berikut:

$("#input").focus();

atau gunakan kod berikut :

$ ("input#input").focus();

Atau gunakan kod berikut:

$("input[id='input']" ).focus();

Dalam kod di atas, kaedah pemilih berbeza digunakan untuk memilih elemen yang perlu difokuskan, tetapi kesannya adalah sama.

Dalam pembangunan sebenar, kadangkala perlu memfokus secara automatik pada elemen apabila halaman dimuatkan Ini boleh dicapai dengan menggunakan kaedah ready() jQuery selepas halaman dimuatkan.

Kodnya adalah seperti berikut:

$(document).ready(function(){

$("#input").focus();

});

Dalam kod di atas, kaedah $( document).ready() untuk menunggu halaman dimuatkan sebelum melakukan operasi fokus.

2. Nyahfokus

Bertentangan dengan fokus, nyahfokus merujuk kepada mengalihkan kursor tetikus atau papan kekunci daripada elemen yang sedang difokuskan supaya ia tidak lagi menjadi elemen "aktif". atau operasi. Dalam jQuery, operasi di luar fokus boleh dicapai melalui kaedah blur().

Sintaks: $(selector).blur()

Antaranya, pemilih mewakili elemen yang perlu di luar fokus, yang boleh menjadi pemilih id, kelas, label, dll. . Contohnya, untuk menyahfokus elemen dengan id input, anda boleh menggunakan kod berikut:

$("#input").blur();

atau gunakan kod berikut:

$("input#input").blur();

Atau gunakan kod berikut:

$("input[id='input']") .blur();

Begitu juga, nyahfokus juga boleh dicapai secara automatik apabila halaman dimuatkan Ia boleh dicapai dengan menggunakan kaedah ready() jQuery selepas halaman dimuatkan.

Kodnya adalah seperti berikut:

$(document).ready(function(){

$("#input").blur();

});

3 🎜>

Di bawah, kami menggunakan contoh aplikasi untuk menunjukkan kesan aplikasi fokus dan nyahfokus.

Kodnya adalah seperti berikut:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

rreee

7145e13fdb3e699161bfc15554fb3710

3c30aa6c4c72dd8ead30672a51b803a7

<title>jQuery聚焦失焦</title>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<style type="text/css">

    #input{

        width: 200px;

        height: 30px;

        font-size: 16px;

    }

    #result{

        margin-top: 20px;

        font-size: 16px;

    }

</style>

<script type="text/javascript">

    $(document).ready(function(){

        $("#input").focus(function(){

            $(this).css("background-color", "#f2f2f2");

        });

        $("#input").blur(function(){

            $(this).css("background-color", "#ffffff");

        });

        $("#btn").click(function(){

            $("#result").text($("#input").val());

        });

    });

</script>

493a3ce9d2a3c91fa60924ecf20a1e6a

73a6ac4ed44ffec12cee46588e518a5e

Dalam kod di atas, a pertama kali ditakrifkan Kotak input dan butang, pengguna boleh memasukkan maklumat dalam kotak input, dan maklumat akan dipaparkan pada halaman selepas mengklik butang. Dalam jQuery, kaedah fokus() dan blur() digunakan untuk mencapai kesan fokus dan nyahfokus Apabila kotak input mendapat fokus, warna latar belakang akan bertukar kepada kelabu, dan apabila dinyahfokus, warna latar belakang akan bertukar kepada putih. Pada masa yang sama, kaedah klik() digunakan untuk melaksanakan peristiwa klik butang, mendapatkan nilai dalam kotak input dan memaparkannya pada halaman.

Melalui kod di atas, kita dapat melihat bahawa fokus dan nyahfokus adalah operasi interaktif yang sangat biasa dan juga sangat biasa digunakan dalam pembangunan web jQuery menyediakan kaedah fokus() dan blur() yang mudah kepada Pelaksanaan, pembangun boleh gunakannya untuk memperkayakan pengalaman interaksi halaman dan memberikan pengguna pengalaman penggunaan yang lebih baik.

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