Hallo sahabat harviacode.com. apa kabar? semoga dalam keadaan sehat.. aamiin.. Dalam bekerja dengan aplikasi berbasis web, kita sering kali meninginkan kecepatan. Nah untuk membantu meningkatkan produktifitas, aplikasi yang kita buat mungkin memerlukan shortcut. Sebagai contoh misalnya untuk masuk ke menu Penjualan kita bisa cukup menekan tombol tertentu, tanpa mencari link dan mengkliknya. atau misalnya mau logout kita cukup tekan tombol Esc, tanpa perlu mengarahkan kursor ke link logout.

shortcut
Membuat tombol shortcut dengan javascript

Biar tidak penasaran, langsung saja kita coba membuatnya yuk.. Buat file index.php dengan kode sebagai berikut :

Jalankan file index tersebut, lalu cobalah tekan tombol Esc, maka Anda akan dibawa ke halaman logout.php. Tentu hasilnya akan 404 karena memang kita tidak membuat file logout.php. Jika anda tekan tombol f12 maka akan ke halaman help.php. Intinya anda sudah berhasil berpindah halaman hanya dengan menekan satu tombol. Seru kan…

Kita juga menggunakan setTimeout disana dan kita memberikan nilai 0. Anda bisa mengubahnya ke milisecond (misalnya 1000 untuk satu detik), jika menghendaki ada jeda antara tekan tombol dan aksi redirect.

e.preventDefault() akan mencegah fungsi bawaan tombol tersebut berjalan. Contohnya jika menekan tombol f12, secara default akan membuka console. Dengan baris kode tersebut maka console tidak akan dijalankan meskipun kita tekan f12.

Yang perlu diperhatikan juga, kita perlu hati-hati memilih tombol yang ingin dijadikan shortcut, jangan menggunakan sembarang tombol. Nanti pengguna bisa2 bukannya terbantu malah pusing. hahaha.

Berikut ini adalah kode lengkap untuk masing-masing tombol

Key Code
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
(space) 32
page up 33
page down 34
end 35
home 36
left arrow 37
up arrow 38
right arrow 39
down arrow 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
left window key 91
right window key 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
decimal point 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
equal sign 187
comma 188
dash 189
period 190
forward slash 191
grave accent 192
open bracket 219
back slash 220
close braket 221
single quote 2

Silahkan dicoba, jangan lupa dilike dan dishare ya.. Terima kasih telah berkunjung ke harviacode.com.