Febriyan Net - Hai kawan. setelah lama admin tidak menulis di blog yang satu ini, kali ini admin akan memberikan tutorial tentang Cara menangkap respon tekan tombol keyboard pada javascript . Ini merupakan ilmu baru bagi admin, jadi intinya yaitu, javascript akan membuat sebuah event ketika tombol di keyboard di tekan. Semisal, teman teman ingin membuat sebuah slider ataupun carousel di mana ketika tombol arah di keyboard di tekan, maka gambar pada slider tadi ikut berubah juga.
Mungkin kali ini admin hanya akan memberikan contoh simple nya saja tentang penerapan javascript ini. Untuk menggunakan fungsi ini, kita akan menggunakan event onkeydown . Event ini merupakan event yang akan berjalan ketika si pengguna menekan tombol pada keyboard, nah kali ini kita akan menggunakan fungsi atau event ini untuk menangkap setiap tombol yang ditekan pada keyboard.
Untuk membuat fungsi ini, kita tidak membutuhkan plugin tambahan apapun, alias pure javascript alias murni 100% javascript . Oke, langsung saja . Pertama tama buat terlebih dahulu struktur HTML nya yang akan di eksekusi oleh javascript untuk menampilkan tombol apa yang di tekan oleh si pengguna :
HTML
<div id="text">
Silahkan Tekan tombol <b>enter</b> atau <b>backspace</b>
</div>
Nah, misi kita kali ini yaitu ketika si pengguna menekan tombol enter maupun backspace , maka akan muncul teks bahwa pengguna sedang menekan tombol tersebut . Oke sekarang kita tambah javascript nya (utama) .
Javascript
<script type="text/javascript">
document.onkeydown = function(e){
var isi;
switch(e.keyCode){
case 13: //ini kode untuk tombol enter
isi = 'Enter';
break;
case 8: //ini kode untuk tombol backspace
isi = 'Backspace';
break;
}
if(isi){ //Jika yang di ketik oleh pengguna berada pada daftar diatas
document.getElementById("text").innerHTML = 'Anda telah menekan tombol <b>'+isi+'</b>';
}else{ //Jika tidak
document.getElementById("text").innerHTML = 'Maaf, tombol yang anda tekan tidak terdaftar . Mohon coba lagi :p ';
}
}
</script>Terlihat, di script diatas bahwa agar javascript dapat menangkap tombol yang ditekan oleh pengguna, setiap tombol memiliki kode tersendiri . Yang admin letakkan pada script di atas hanya tombol enter (13) dan backspace (8) .
Berikut merupakan daftar tombol dan kode javascript nya ^_^ :
| Tombol | Kode |
|---|---|
| Backspace | 8 |
| Tab | 9 |
| Enter | 13 |
| Shift | 16 |
| Ctrl | 17 |
| Alt | 18 |
| Pause/Break | 19 |
| Caps Lock | 20 |
| Escape | 27 |
| Page Up | 33 |
| Page Down | 34 |
| End | 35 |
| Home | 36 |
| Panah Kiri | 37 |
| Panah Atas | 38 |
| Panah Kanan | 39 |
| Panah Bawah | 40 |
| Insert | 45 |
| Delete | 46 |
| 0 | 48 |
| 1 | 49 |
| 2 | 50 |
| 3 | 51 |
| 4 | 52 |
| 5 | 53 |
| 6 | 54 |
| 7 | 55 |
| 8 | 56 |
| 9 | 57 |
| a | 65 |
| b | 66 |
| c | 67 |
| d | 68 |
| e | 69 |
| f | 70 |
| g | 71 |
| h | 72 |
| i | 73 |
| j | 74 |
| k | 75 |
| l | 76 |
| m | 77 |
| n | 78 |
| o | 79 |
| p | 80 |
| q | 81 |
| r | 82 |
| s | 83 |
| t | 84 |
| u | 85 |
| v | 86 |
| w | 87 |
| x | 88 |
| y | 89 |
| z | 90 |
Sebenar nya masih banyak lagi sih tombol dan kode nya , berhubung yang admin tulis sudah lumayan banyak, ya sudah, mungkin hanya itu saja yang dapat admin tulis untuk teman teman :D .
Untuk mempercepat dan mengifisienkan waktu, admin jadikan satu script2 tadi :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Belajar Keyboard Javascript</title>
<script type="text/javascript">
document.onkeydown = function(e){
var isi;
switch(e.keyCode){
case 13:
isi = 'Enter';
break;
case 8:
isi = 'Backspace';
break;
}
if(isi){
document.getElementById("text").innerHTML = 'Anda telah menekan tombol <b>'+isi+'</b>';
}else{
document.getElementById("text").innerHTML = 'Maaf, tombol yang anda tekan tidak terdaftar . Mohon coba lagi :p ';
}
}
</script>
</head>
<body>
<div id="text">
Silahkan Tekan tombol <b>enter</b> atau <b>backspace</b>
</div>
</body>
</html>
Oke lanjut. Simpan script tadi dan jalankan pada Browser, bisa Chrome maupun Firefox . Pliss Jangan IE :v .
Nah, sekarang kita test coba tekan tombol enter :
Horee. Nah, sekarang kita coba yang satu nya yaitu menekan tombol backspace :
Sekarang kita coba menekan tombol selain enter dan backspace dan apa yang terjadi :
Haha. Oke, silahkan kembangkan sendiri sesuai kreatifitas teman teman. Sebenarnya fungsi ini akan sangat bermanfaat bagi teman teman jika sudah mendevelop sebuah project web :) .
Referensi
https://www.w3schools.com/jsref/event_onkeydown.asp
Sekian artikel tentang Cara menangkap respon tekan tombol keyboard pada javascript . Semoga bermanfaat bagi teman teman yang sedang belajar JavaScript :) .
Terimakasih
0 comments