menjalankan kode program dengan tombol shortcut keyboard via javascript – Pada dunia pemrograman, mungkin bahasa javascript telah tak asing lagi. Kode javascript berkaitan erat dengan animasi dan transisi sebuah laman. Pastinya selain dari sisi program, laman pun perlu dibangun interaktif agar client/pengunjung nyaman dan berkesan ketika mengaksesnya.
Di panduan javascript kali ini, saya akan membagikan cara mengeksekusi atau membangun sesuatu menggunakan shortcut keyboard. Apa itu shortcut keyboard?
Shortcut keyboard ialah pintasan atau kode command cepat yang dapat diaplikasikan pada sebuah laman. Seperti yang orang awam ketahui, CTRL + C ialah command bagi Copy, CTRL + T ialah command bagi membangun tab baru di browser dan lain lain. Namun pada sebuah laman, kita dapat membangun sebuah tombol shortcut bagi memerintahkan laman via keyboard dengan javascript.
Baca Pun: Beberapa Shortcut Keyboard Windows Yang Wajib Diketahui
Kita dapat mengatur, apa yang akan dilakukan laman kita dengan shortcut tertentu. Misal, kita akan mengatur, kalau pengunjung menekan tombol Enter, karenanya akan keluar alert berbunyi Berhasil!. Dan kalau menekan tombol backspace, karenanya halaman akan dialihkan ke halaman keluar.php
Berikut scriptnya. Perhatikan baik-baik..
document.onkeydown = function(teziger){
switch(teziger.keyCode){
case 13: // KeyCode tombol Enter
alert(‘Berhasil!’);
break;
// Menambah guna shortcut lain
case 8: // KeyCode tombol backspace
window.location=’keluar.php’;
break;
}
teziger.preventDefault(); // Menghapus guna default tombol
}
Perhatikan tulisan berwarna merah
Tulisan yang saya tulis dengan warna merah ialah KeyCode keyboard. Tiap tombol pada keyboard mempunyai keycode masing masing. Keycode belaku seperti id unik tombol bagi mendeteksi tombol dengan keycode yang ditekan.
Pada kode diatas dapat diterangkan seperti berikut ini.
Jikalau tombol dengan keycode 13 (enter), karenanya akan keluar alert “Berhasil!”. Jikalau tombol dengan keycode 8 (backspace), karenanya akan dialihkan ke halaman “keluar.php”.
Berikut ini ialah daftar/list keycode keyboard dan juga nama tombol keyboardnya.
| Key | Code |
| 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 |
| Key | Code |
| 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 |
| windows kiri | 91 |
| windows kanan | 92 |
| select key | 93 |
| numpad 0 | 96 |
| numpad 1 | 97 |
| numpad 2 | 98 |
| numpad 3 | 99 |
| numpad 4 | 100 |
| numpad 5 | 101 |
| numpad 6 | 102 |
| numpad 7 | 103 |
| Key | Code |
| numpad 8 | 104 |
| numpad 9 | 105 |
| multiply | 106 |
| add | 107 |
| subtract | 109 |
| desimal | 110 |
| divide | 111 |
| f1 | 112 |
| f2 | 113 |
| f3 | 114 |
| f4 | 115 |
| f5 | 116 |
| f6 | 117 |
| f7 | 118 |
| f8 | 119 |
| f9 | 120 |
| f10 | 121 |
| f11 | 122 |
| f12 | 123 |
| num lock | 144 |
| scroll lock | 145 |
| semi-colon | 186 |
| tanda sama | 187 |
| koma | 188 |
| tanda pisah | 189 |
| titik | 190 |
| garis miring | 191 |
| grave accent | 192 |
| buka kurung | 219 |
| garis miring terbalik | 220 |
| tutup kurung | 221 |
| petik satu | 222 |
Seperti itulah cara membuat shorcut keyboard sendiri dengan javascript. Kamu dapat memaksimalkan segala keycode tersebut. Jikalau seseorang mengetik apa, karenanya akan berjalan kode apa. Seluruh bergantung kepada developer 🙂
Semoga bermanfaat! Terima Kasih!
