Menangkap Tombol Keyboard dengan Javascript. Lama gak update tutorial ya sob, dan hari ini saya kepikiran tentang bagaima cara mendeteksi penekanan tombol keyboard yang ada dalam website. Menangkap tombol keyboard yang ditetan bisa di lakukan dengan fungsi javascript, dan penggunaannya biasanya pada aplikasi kasir yang ada di toko-toko karena biar gak ribet ngeklik sana sini.
Sebenarna keyboard yang ada di komputer dan laptop sobat semua sudah ada kode unik yang bisa dipanggil dengan javasctipt. Untuk kode-kodenya bisa di lihat pada tabel di bawah ini.
Bisa dilihat di atas bahwa setiap tombol keyboard diwakili oleh kode angka unik yang tidak sama dengan lainnya.
Nah, sekarang yang akan kita lakukan adalah membuat sebuah kode javascript bagaimana cara menangkap kode keyboard tersebut dan menampilkan informasi di browser, dalam hal ini hanya akan menampilkan popup alert javasript.
Dan beginilah kodenya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head> <title>Tes</title> </head> <body onkeydown="myFunction()"> <h1>TUTORIALWEB.NET</h1> <script> function myFunction(){ /* tombol F11 */ if(event.keyCode == 122) { event.preventDefault() alert('Anda menekan tombol F11'); } } </script> </body> </html> |
Dari kode di atas bisa dilihat bahwa kode 122 adalah untuk F11, jika F11 pada keyboard maka akan muncul popup alert “Anda menekan tombol F11”. Satu lagi bahwa fungsi default F11 pada browser (Google Chrome) adalah untuk full screen. Jadi kode di atas event.preventDefault() gunanya untuk mematikan fungsi default pada browser dan menggantinya dengan fungsi sobat sendiri.
Nah, dari sini mungkin sobat sudah mulai paham gunanya apa. Fungsi alert() bisa juga diganti dengan apapun yang sobat inginkan.
Silahkan eksperimen sendiri ya sob. semoga bermanfaat.
Berarti yg dipakai online editor untu copas text dengan tehnik ini ?
bisa juga kayak itu
Kalo kombinasi tombol gimana kak
belum saya coba, nanti saya tulis lagi artikel untuk tombol kombinasi.. thanks sarannya.. 🙂
Visitor Rating: 5 Stars