Membuat Shortcut Keyboard Dengan Javascript

menjalankan kode program dengan tombol shortcut keyboard via javascript - Dalam dunia pemrograman, mungkin bahasa javascript sudah tak asing lagi. Kode javascript berkaitan erat dengan animasi dan transisi sebuah website. Tentunya selain dari sisi sistem, website juga perlu dibuat interaktif agar client/pengunjung nyaman dan berkesan ketika mengaksesnya.

Di tutorial javascript kali ini, saya akan membagikan cara mengeksekusi atau membuat sesuatu menggunakan shortcut keyboard. Apa itu shortcut keyboard?

Shortcut keyboard adalah pintasan atau kode perintah cepat yang dapat diaplikasikan dalam sebuah website. Seperti yang orang awam ketahui, CTRL + C adalah perintah untuk Copy, CTRL + T adalah perintah untuk membuat tab baru pada browser dan lain lain. Namun dalam sebuah website, kita dapat membuat sebuah tombol shortcut untuk memerintahkan website melalui keyboard dengan javascript.

Baca Juga: Beberapa Shortcut Keyboard Windows Yang Wajib Diketahui

Kita bisa mengatur, apa yang akan dilakukan website kita dengan shortcut tertentu. Misal, kita akan mengatur, jika pengunjung menekan tombol Enter, maka akan keluar alert berbunyi Berhasil!. Dan jika menekan tombol backspace, maka 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 fungsi shortcut lain
      case 8:    // KeyCode tombol backspace
      window.location='keluar.php';
      break;
   }
   teziger.preventDefault();    // Menghapus fungsi default tombol
}

Perhatikan tulisan berwarna merah

Tulisan yang saya tulis dengan warna merah adalah KeyCode keyboard. Tiap tombol dalam keyboard memiliki keycode masing masing. Keycode belaku seperti id unik tombol untuk mendeteksi tombol dengan keycode yang ditekan.

Dalam kode diatas bisa dijelaskan seperti berikut ini.

Jika tombol dengan keycode 13 (enter), maka akan keluar alert "Berhasil!". Jika tombol dengan keycode 8 (backspace), maka akan dialihkan ke halaman "keluar.php".

Berikut ini adalah daftar/list keycode keyboard beserta 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

Itulah cara membuat shorcut keyboard sendiri dengan javascript. Kamu bisa mengembangkan semua keycode tersebut. Jika seseorang mengetik apa, maka akan berjalan kode apa. Semua bergantung kepada developer :)

Semoga bermanfaat! Terima Kasih!