Categories: Javascript

Mendeteksi event keyboard dengan javascript

Bismillaahirrohmaanirrohiim…

Disini saya akan membuat script sederhana tentang bagaimana cara mendeteksi event atau aksi pada keyboard, sehingga misalkan user menekan tombol A, B, Alt, Enter, dsb event tersebut bisa dideteksi dan dapat melakukan aksi selanjutnya yang diperlukan, hanya menggunakan javascript.

Berikut kode mendeteksi keyboard pada javascript:

<script type="text/javascript">
window.addEventListener('keydown', function (e) {
      alert("Anda menekan tombol "+e.key);
}, false);
</script>

Untuk membuat kombinasi tombol keyboard, misalnya Alt+Enter atau Alt+K atau Shift+L gunakan kode dibawah ini:

<script type="text/javascript">
var tempkey = 'A';
window.addEventListener('keydown', function (e) {

                if (tempkey=='Alt' && e.key=='Enter') {
                    alert("Anda menekan tombol Alt dan Enter");
                } else if ( (tempkey=='Alt' && e.key=='K') || (tempkey=='Alt' && e.key=='k') ) {
                    alert("Anda menekan tombol Alt dan K");
                } else if ( (tempkey=='Alt' && e.key=='N') || (tempkey=='Alt' && e.key=='n') ) {
                    alert("Anda menekan tombol Alt dan N");
                }

      tempkey = e.key;
}, false);
</script>

Nah, untuk menonaktifkan tombol default keyboard tambahkan preventDefault pada event tersebut, jadi seperti ini:

<script type="text/javascript">
window.addEventListener('keydown', function (e) {
      e.preventDefault();
      alert("Anda menekan tombol "+e.key);
}, false);
</script>

Demikian semoga bermanfaat…

Bagikan
rasupe

Recent Posts

CPU usage tinggi pada server

Bismillaahirrohmaanirrohiim... Untuk mendeteksi cpu usage tinggi memang perkara rumit, adakalanya karena codingan bermasalah, akses ke…

2 weeks ago

Membersihkan log mongodb yang besar

Bismillaahirrohmaanirrohiim... Jika tidak dirawat dan dicek berkala, log mongodb akan semakin membesar. Bahkan sampai menghabiskan…

4 weeks ago

Cara mengakses gps di HP dengan javascript

Bismillaahirrohmaanirrohiim... Jika kita membuat website yang digunakan untuk memantau lokasi HP client, maka kita memerlukan…

4 months ago

Menghitung jarak dua titik koordinat dengan php dan javascript

Bismillaahirrohmaanirrohiim... Kali ini kita akan mencoba menerapkan rumus trigonometeri dari formula haversine, yang digunakan untuk…

4 months ago

Kemasan cleo botol kecil sering bikin tangan terluka

Bismillaahirrohmaanirrohiim... Disini saya akan berbagi pengalaman tentang susahnya membuka tutup botol cleo kecil ukuran 220ml.…

4 months ago

Solusi InsCek pada meteran PLN

Bismillaahirrohmaanirrohiim... Kali ini saya akan berbagi pengalaman tentang mati lampu yang disebabkan oleh permasalahan arus…

4 months ago