Dalam skenario seperti validasi dan verifikasi data, gaya elemen bidang akan berubah setiap kali tombol yang ditekan dilepaskan oleh pengguna dari keyboard. Perubahan gaya relatif terhadap setiap penekanan atau pelepasan tombol dilakukan melalui event handler yang disediakan oleh jQuery. Untuk lebih spesifiknya, event handler atau metode yang menangani atau memanggil fungsi ketika tombol yang ditekan dilepaskan adalah “ keyup ()' metode.
Di sisi lain, metode yang menangani atau memanggil tombol fungsi yang ditekan adalah “ kunci bawah ()” dan Anda dapat memeriksa metode terkait kami artikel untuk acara ini.
Di blog ini, kami akan memberikan penjelasan singkat tentang metode jQuery keyup().
Bagaimana Cara Menggunakan Metode jQuery keyup()?
jQuery “ keyup ()” metode memicu fungsi anonim setiap kali pengguna berhenti menekan atau memasukkan tombol di dalam bidang yang dipilih. Metode ini juga digunakan untuk menerapkan gaya dinamis pada elemen yang dipilih secara real-time.
Sintaksis
Sintaks yang digunakan untuk metode keyup() jQuery adalah sebagai berikut:
$ ( 'ini' ) . keyup ( fungsi kustom )
Dalam sintaks di atas, “ ini ” adalah elemen HTML yang dipilih, dan “ fungsi kustom ” adalah fungsi yang dijalankan oleh “ keyup ” metode di atas “ ini ”.
Mari kita lihat beberapa contoh untuk pemahaman lebih dalam.
Contoh 1: Mengubah Warna Teks Menggunakan Metode “keyup()”.
Dalam hal ini, warna teks yang dimasukkan akan diubah ke warna lain ketika pengguna melepaskan tombol yang sudah ditekan seperti yang ditunjukkan di bawah ini:
< html >
< kepala >
< naskah src = 'https://code.jquery.com/jquery-3.7.0.js' < / naskah >
< naskah >
$(dokumen).siap(fungsi() {
$('#demo').keyup(fungsi() {
$('#demo').css('warna', 'hijau hutan');
});
});
< / naskah >
< / kepala >
< tubuh >
< div >
Masukkan Data Petunjuk Linux: < memasukkan pengenal = 'demo' jenis = 'teks' / >
< / div >
< / tubuh >
< / html >
Deskripsi kode di atas disebutkan di bawah ini:
- Pertama, impor jQuery ke dalam proyek dengan memasukkan CDN online-nya dengan mengunjungi ini tautan dokumentasi resmi.
- Selanjutnya, buat fungsi anonim yang akan dipanggil ketika “ dokumen ” atau halaman dimuat. Fungsi ini memilih elemen HTML dengan id “demo” dan melampirkan “ keyup ()” metode dengan itu.
- “ keyup ()” memanggil fungsi panggilan balik yang menggunakan “ css ()” untuk mengatur warna font teks menjadi “ hutan hijau ”.
- Sekarang, buat “< memasukkan >” elemen di dalam “< tubuh >” beri tag dan berikan id “ demo ”.
Pratinjau halaman web setelah selesainya proses kompilasi:
Outputnya menunjukkan warna teks berubah ketika kunci yang dipilih telah dilepaskan.
Contoh 2: Mengubah Warna Latar Belakang Secara Dinamis
Dalam contoh ini, warna latar belakang yang berbeda akan ditetapkan untuk elemen HTML yang dipilih setiap kali pengguna meninggalkan tombol yang ditekan. Mari kita lihat kode untuk skenario ini:
< kepala >< naskah src = 'https://code.jquery.com/jquery-3.7.0.js' < / naskah >
< naskah >
biarkan latar belakangShades = [ 'aquamarine' , 'oranye' , 'kadet biru' , 'hutan hijau' ,
'Abu-abu muda' , 'coklat berpasir' , 'magenta' , 'kayu kekar' ] ;
biarkan j = 0 ;
$ ( dokumen ) .keyup ( fungsi ( peristiwa ) {
$ ( '#hgg' ) .css ( 'warna latar belakang' , latar belakangNuansa [ J ] ) ;
j++;
J = J % 9 ;
} ) ;
< / naskah >
< / kepala >
< tubuh >
< h1 gaya = 'warna: hijau laut' >Artikel Petunjuk Linux< / h1 < saudara >
< div pengenal = 'hgg' gaya = 'bantalan: 10 piksel' >
< h2 >keyup jQuery Digunakan untuk Mengatur Berbeda Latar belakang setiap kali Kunci dilepaskan.< / h2 >
< saudara / >
< / div >
< / tubuh >
Deskripsi kode di atas:
- Awalnya, impor jQuery di proyek Anda dengan menambahkan jQuery CDN di dalam “< kepala >” tanda.
- Kemudian, buatlah array bernama “ latar belakangNuansa ” yang berisi delapan warna acak.
- Selanjutnya, “ keyup ()” metode dilampirkan ke “ dokumen ” dan itu memanggil fungsi panggilan balik anonim. Fungsi ini memilih elemen HTML dengan id “ hgg ” dan menerapkan CSS “ warna latar belakang ' Properti.
- susunan “ latar belakangNuansa ” diteruskan sebagai nilai untuk properti CSS dan indeks disetel ke “ J ' variabel. Variabel ini bertambah satu setiap kali dan dimulai ulang dari “ 0 ” mengindeks ketika nilainya mencapai “ 8 ”. Karena indeks maksimal dalam array adalah “ 7 ”.
- Setelah itu, buatlah pilihan “ div ” elemen dengan id “ hgg ”, warna latar belakang elemen ini akan berubah saat tombol yang ditekan dilepaskan.
Pratinjau halaman web setelah kompilasi:
Outputnya mengonfirmasi warna latar belakang untuk elemen HTML yang dipilih berubah setiap kali tombol yang ditekan atau dipilih dilepaskan. Itu semua tentang menggunakan “ keyup ()' metode.
Kesimpulan
jQuery “ keyup ()” metode memicu fungsi panggilan balik pada elemen HTML yang dipilih ketika tombol yang ditekan telah dilepaskan. Metode ini tidak memanggil ketika tombol sedang ditekan tetapi pada saat melepaskan atau ketika tombol dinaikkan, fungsi ini menjalankan fungsi panggilan balik. Blog ini telah menjelaskan penggunaan dan cara kerja metode jQuery keyup().