Bagaimana untuk memantau perubahan teks dalam jquery

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas untuk merevolusikan cara tapak web dibangunkan. Dalam perpustakaan ini, terdapat banyak fungsi dan kaedah berbeza yang boleh membantu anda mengakses dan mengubah suai kandungan dalam dokumen HTML dengan lebih mudah.

Dalam artikel ini, kami akan meneroka cara jQuery mendengar perubahan teks. Apabila anda perlu memasukkan data dalam kotak teks, anda mungkin mahu melakukannya sebaik sahaja anda memasukkan sebarang aksara dalam kotak teks. Memahami cara menggunakan jQuery untuk mendengar perubahan teks bukan sahaja akan memberi anda kawalan yang lebih besar ke atas elemen dinamik dan interaktiviti tapak web anda, tetapi ia juga akan membantu anda memahami asas jQuery.

Untuk jQuery, terdapat dua cara untuk memantau perubahan teks: gunakan kaedah .value() dan .bind(). Kami akan membincangkan kedua-dua kaedah secara terperinci supaya anda boleh lebih memahami cara menggunakannya untuk mendengar perubahan teks.

Gunakan kaedah .value() untuk memantau perubahan teks

kaedah.value() digunakan untuk mendapatkan nilai elemen HTML bentuk. Ia menangkap nilai semasa kotak teks, termasuk perubahan terkini pada input pengguna. Untuk mendengar perubahan teks, kita perlu menggunakannya semasa menaip.

Berikut ialah contoh kod:

$(document).ready(function(){
  $("#myTextBox").on('input propertychange', function(){
    console.log("Text changed!");
  });
});

Blok kod di atas menggunakan kaedah .on() jQuery, yang mengikat dua pengendali acara, input dan propertychange. Kedua-dua pengendali acara ini boleh mencetuskan sebarang perubahan dalam kotak teks. Mana-mana satu akan memanggil fungsi pengendali, yang akan mengeluarkan mesej bahawa teks telah berubah dalam kes ini.

Anda mungkin tertanya-tanya mengapa kami perlu mengikat dua pengendali acara dan bukannya menggunakan satu sahaja. Ini kerana kedua-dua acara ini adalah pelayar silang. Acara propertychange hanya berfungsi dalam IE, manakala acara input berfungsi dalam semua penyemak imbas lain. Oleh itu, menggunakan gabungan kedua-dua acara ini memastikan kod anda akan berjalan dengan betul pada semua pelayar utama.

Kini, apabila pengguna memasukkan teks, fungsi pengendali acara akan mengeluarkan mesej dalam konsol, "Teks ditukar!" Ini bermakna apabila anda memasukkan sebarang aksara dalam kotak teks, acara mendengar ini akan dicetuskan .

Gunakan kaedah .bind() untuk memantau perubahan teks

Sekarang mari lihat cara menggunakan kaedah .bind() jQuery untuk memantau perubahan teks. Kaedah .bind() ialah kaedah mengikat pengendali acara, yang boleh digunakan untuk memantau perubahan dalam nilai kotak teks.

Berikut ialah kod sampel:

$(document).ready(function() {
  $('#myTextBox').bind('input', function() {
    console.log("Text changed!")
  });
});

Dalam contoh ini, kami menggunakan kaedah .bind(), yang berbeza sedikit daripada kaedah .on() dalam contoh sebelumnya, tetapi fungsi asasnya adalah sama. Kami menetapkan fungsi pengendali acara yang akan dipanggil apabila sebarang nilai baharu dimasukkan dalam kotak teks.

Sama seperti kaedah sebelumnya, apabila program berjalan, ia akan memantau input dalam kotak teks. Apabila pengguna memasukkan sebarang nilai dalam kotak teks, fungsi pengendali acara akan mengeluarkan mesej, "Teks ditukar dalam konsol. Selain itu, seperti kaedah sebelumnya, kaedah ini juga menyokong tingkah laku merentas pelayar yang berbeza.

Ringkasan

Dalam artikel ini, kami telah mempelajari cara menggunakan jQuery untuk memantau perubahan teks dalam kotak teks. Kami membincangkan dua pendekatan berbeza: menggunakan kaedah .value() dan .bind().

Gunakan kaedah fungsi .value() untuk menangkap nilai semasa kotak teks dan gunakan dua pengendali peristiwa, input dan propertychange, untuk menyokong gelagat merentas penyemak imbas. Kaedah menggunakan kaedah .bind() adalah sama, tetapi anda hanya perlu menentukan pengendali acara untuk melaksanakannya. Anda boleh memilih salah satu kaedah ini berdasarkan keutamaan peribadi anda.

Tidak kira kaedah yang anda pilih, anda akan mempunyai lebih kawalan ke atas elemen dinamik dan interaktiviti tapak anda. Selain itu, menggunakan kaedah ini juga akan memberi anda pemahaman yang lebih baik tentang asas jQuery.

Atas ialah kandungan terperinci Bagaimana untuk memantau perubahan teks dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!