Header Ads

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.

KeyCode
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


KeyCode
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

KeyCode
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!

No comments

Silahkan komentar dengan bijak, anda juga bisa request software disini

Powered by Blogger.