Artikel ini akan memandu Anda untuk mendeteksi tombol tab dalam JavaScript.
Bagaimana Cara Mendeteksi Tab Key di JavaScript?
Untuk mendeteksi kunci tab dalam JavaScript, terapkan teknik berikut:
- “ kueriPemilih() ' Metode
- “ getElementbyId() ' Metode
Pendekatan yang disebutkan akan ditunjukkan satu per satu!
Metode 1: Mendeteksi Tab Key dalam JavaScript Menggunakan Metode document.querySelector()
' document.queryPemilih() ” mengakses elemen pertama yang cocok dengan pemilih CSS, lalu metode addEventListener() menambahkan pengendali peristiwa ke elemen yang diakses. Metode ini dapat diterapkan untuk mengakses jenis input dan mendeteksi apakah tombol tab ditekan atau tidak saat nilainya dimasukkan.
Sintaksis
elemen. tambahkanEventListener ( peristiwa , fungsi , gunakan Tangkap )
Dalam sintaks yang diberikan, “ peristiwa ” mengacu pada nama acara, “ fungsi ” adalah fungsi khusus yang akan dijalankan saat peristiwa terjadi, dan “ gunakan Tangkap ” adalah argumen opsional.
dokumen. kueriPemilih ( pemilih CSS )Dalam sintaks di atas, “ pemilih CSS ” merujuk ke satu atau beberapa pemilih CSS yang dapat ditentukan dalam metode document.querySelector().
Lihat contoh berikut untuk pemahaman yang lebih baik tentang konsep yang dinyatakan.
Contoh
Pertama, tentukan jenis input sebagai “ teks ” dengan nilai placeholder awal dan judul di “
< h2 > Hasil < / h2 >
Selanjutnya, terapkan “ document.queryPemilih() ” untuk mengakses input dan heading yang ditentukan masing-masing dan menyimpannya dalam variabel bernama “ memasukkan ' dan ' hasil ”:
biarkan masukan = dokumen. kueriPemilih ( 'memasukkan' ) ;biarkan hasil = dokumen. kueriPemilih ( 'h2' ) ;
Sekarang, tambahkan “ kunci bawah ” dengan bidang input menggunakan metode addEventListener(). Acara ini akan memberi tahu pengguna setiap kali ' tab ” ditekan di bidang input dengan menerapkan kondisi berikut dengan bantuan tombol “ innertext ' Properti:
memasukkan. tambahkanEventListener ( 'menutup kunci' , ( dan ) => {jika ( dan. kunci === 'Tab' ) {
hasil. innertext = 'Tombol Tab Ditekan' ;
} kalau tidak {
hasil. innertext = 'Tombol Tab Tidak Ditekan' ;
}
Dalam hal ini, ketika pengguna akan menekan tombol tab, yang ditambahkan akan memberi tahu tentang tindakan yang dilakukan:
Metode 2: Deteksi Tab Key dalam JavaScript Menggunakan Metode document.getElementbyId()
' document.getElementById() Metode ” dapat digunakan untuk mengakses elemen HTML tertentu berdasarkan id-nya. Metode ini dapat diterapkan untuk mendapatkan bidang input dan menambahkan acara untuk mengingatkan pengguna setiap kali tombol tertentu ditekan, seperti tombol tab.
Sintaksis
dokumen. getElementById ( elemen )Dalam sintaks yang diberikan, “ elemen ” mengacu pada id elemen tertentu.
Mari kita lihat contoh berikut.
Contoh
Dalam contoh di bawah ini, sertakan tipe input dan nilai placeholder seperti yang dibahas dalam metode sebelumnya:
Sekarang, ambil id bidang input menggunakan ' document.getElementById() ' metode.
biarkan input= document.getElementById(“tab”);
Terakhir, tambahkan acara bernama “ kunci bawah ” dalam metode addEventListener(), yang akan mengingatkan pengguna setiap kali “ tab ” ditekan:
memasukkan. tambahkanEventListener ( 'menutup kunci' , ( dan ) => {jika ( dan. kunci === 'Tab' ) {
peringatan ( 'Tombol Tab Ditekan' ) ;
}
} ) ;
Keluaran
Kami telah membahas semua metode paling sederhana untuk mendeteksi kunci tab dalam JavaScript.
Kesimpulan
Untuk mendeteksi kunci tab dalam JavaScript, gunakan tombol “ tambahkanEventListener() ' dengan ' document.queryPemilih() ” untuk mendapatkan jenis input dan menerapkan peristiwa untuk mendeteksi kunci yang ditentukan atau “ getElementbyId() ” metode untuk mengambil bidang input berdasarkan id-nya dan memberi tahu pengguna setiap kali kondisi tambahan terpenuhi. Blog ini memandu tentang mendeteksi kunci tab dalam JavaScript.