Dalam senario seperti pengesahan dan pengesahan data, penggayaan elemen medan akan berubah apabila kekunci yang ditekan tunggal dikeluarkan oleh pengguna daripada papan kekunci. Perubahan penggayaan ini berbanding setiap penekanan atau keluaran kekunci dilakukan melalui pengendali acara yang disediakan oleh jQuery. Secara khusus, pengendali acara atau kaedah yang menangani atau menggunakan fungsi apabila sebarang kekunci yang ditekan dilepaskan ialah ' keyup ()” kaedah.
Sebaliknya, kaedah yang mengendalikan atau memanggil kekunci fungsi ditekan ialah ' keydown ()” dan anda boleh menyemak berkaitan kami artikel untuk acara ini.
Dalam blog ini, kami akan memberikan penerangan ringkas tentang kaedah keyup() jQuery.
Bagaimana untuk Menggunakan Kaedah keyup() jQuery?
jQuery ' keyup ()” kaedah mencetuskan fungsi tanpa nama apabila pengguna berhenti menekan atau memasukkan kekunci di dalam medan yang dipilih. Kaedah ini juga digunakan untuk menggunakan penggayaan dinamik ke atas elemen yang dipilih dalam masa nyata.
Sintaks
Sintaks yang digunakan untuk kaedah keyup() jQuery adalah seperti berikut:
$ ( 'ini' ) . keyup ( customFunc )
Dalam sintaks di atas, ' ini ' ialah elemen HTML yang dipilih, dan ' customFunc ' ialah fungsi yang dilaksanakan oleh ' keyup ' kaedah ke atas ' ini ”.
Mari kita lihat beberapa contoh untuk pemahaman yang lebih mendalam.
Contoh 1: Menukar Warna Teks Menggunakan Kaedah “keyup()”.
Dalam kes ini, warna teks yang dimasukkan akan ditukar kepada warna lain apabila pengguna melepaskan kekunci yang telah ditekan seperti ditunjukkan di bawah:
< html >
< kepala >
< skrip src = 'https://code.jquery.com/jquery-3.7.0.js' >< / skrip >
< skrip >
$(document).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('warna', 'hijau hutan');
});
});
< / skrip >
< / kepala >
< badan >
< div >
Masukkan Data Linuxhint: < input ID = 'demo' menaip = 'teks' / >
< / div >
< / badan >
< / html >
Penerangan kod di atas disebut di bawah:
- Pertama, import jQuery ke dalam projek dengan memasukkan CDN dalam talian dengan melawati ini pautan daripada dokumentasi rasmi.
- Seterusnya, buat fungsi tanpa nama yang akan dipanggil apabila ' dokumen ” atau halaman dimuatkan. Fungsi ini memilih elemen HTML dengan id 'demo' dan melampirkan ' keyup ()” kaedah dengannya.
- ' keyup ()' kaedah memanggil fungsi panggil balik yang menggunakan ' css ()” untuk menetapkan warna fon teks kepada “ hutan hijau ”.
- Sekarang, buat '< input >” elemen di dalam “< badan >” dan berikan id “ demo ”.
Pratonton halaman web selepas selesai proses penyusunan:
Output menunjukkan warna teks berubah apabila kekunci yang dipilih telah dikeluarkan.
Contoh 2: Menukar Warna Latar Belakang Secara Dinamik
Dalam contoh ini, warna latar belakang yang berbeza akan ditetapkan untuk elemen HTML yang dipilih apabila pengguna meninggalkan kekunci yang ditekan. Mari kita lihat kod untuk senario ini:
< kepala >< skrip src = 'https://code.jquery.com/jquery-3.7.0.js' >< / skrip >
< skrip >
biarkan backgroundShades = [ 'aquamarine' , 'oren' , 'kadet biru' , 'hutan hijau' ,
'kelabu cerah' , 'coklat pasir' , 'magenta' , 'kayu burlywood' ] ;
biarkan j = 0 ;
$ ( dokumen ) .keyup ( fungsi ( peristiwa ) {
$ ( '#hgg' ) .css ( 'warna latar belakang' , backgroundShades [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / skrip >
< / kepala >
< badan >
< h1 gaya = 'warna: hijau laut' >Artikel Linux< / h1 >< br >
< div ID = 'hgg' gaya = 'padding: 10px' >
< h2 >Kekunci jQuery Digunakan untuk Tetapkan Berbeza Latar belakang setiap kali apabila Key dilepaskan.< / h2 >
< br / >
< / div >
< / badan >
Penerangan kod di atas:
- Pada mulanya, import jQuery dalam projek anda dengan menambah jQuery CDN di dalam '< kepala >” tag.
- Kemudian, buat tatasusunan bernama ' latar belakangShades ” yang mengandungi lapan warna rawak.
- Seterusnya, ' keyup ()' kaedah dilampirkan pada ' dokumen ” dan ia menggunakan fungsi panggil balik tanpa nama. Fungsi ini memilih elemen HTML dengan id ' hgg ' dan menggunakan CSS ' warna latar belakang ” harta benda.
- Tatasusunan ' latar belakangShades ” diluluskan sebagai nilai untuk sifat CSS dan indeks ditetapkan kepada “ j ” pembolehubah. Pembolehubah ini ditambah satu setiap kali dan dimulakan semula dari ' 0 ” indeks apabila nilai mencapai “ 8 ”. Kerana indeks maks dalam tatasusunan ialah “ 7 ”.
- Selepas itu, buat ' yang dipilih div elemen ” dengan id “ hgg ”, warna latar belakang elemen ini akan ditukar apabila kekunci yang ditekan dilepaskan.
Pratonton halaman web selepas penyusunan:
Output mengesahkan warna latar belakang untuk elemen HTML yang dipilih berubah setiap kali apabila kekunci yang ditekan atau dipilih dikeluarkan. Itu semua tentang menggunakan ' keyup ()” kaedah.
Kesimpulan
jQuery ' keyup ()” kaedah mencetuskan fungsi panggil balik pada elemen HTML yang dipilih apabila kekunci yang ditekan telah dilepaskan. Kaedah ini tidak memanggil apabila kekunci sedang ditekan tetapi pada masa melepaskan atau menghidupkan kekunci fungsi ini melaksanakan fungsi panggil balik. Blog ini telah menerangkan penggunaan dan cara kerja kaedah keyup() jQuery.