Membuat Shortcut Keyboard Dengan Javascript

menjalankan isyarat aktivitas dengan tombol shortcut keyboard via javascript - Dalam dunia pemrograman, mungkin bahasa javascript sudah tak gila lagi. Kode javascript berkaitan dekat dengan animasi dan transisi sebuah website. Tentunya selain dari sisi sistem, website juga perlu dibentuk interaktif semoga client/pengunjung nyaman dan berkesan dikala mengaksesnya.

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

Shortcut keyboard yaitu pintasan atau isyarat perintah cepat yang sanggup diaplikasikan dalam sebuah website. Seperti yang orang awam ketahui, CTRL + C yaitu perintah untuk Copy, CTRL + T yaitu perintah untuk menciptakan tab gres pada browser dan lain lain. Namun dalam sebuah website, kita sanggup menciptakan sebuah tombol shortcut untuk memerintahkan website melalui keyboard dengan javascript.

Baca Juga: Beberapa Shortcut Keyboard Windows Yang Wajib Diketahui

Kita sanggup mengatur, apa yang akan dilakukan website kita dengan shortcut tertentu. Misal, kita akan mengatur, kalau 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 goresan pena berwarna merah

Tulisan yang saya tulis dengan warna merah yaitu KeyCode keyboard. Tiap tombol dalam keyboard mempunyai keycode masing masing. Keycode belaku menyerupai id unik tombol untuk mendeteksi tombol dengan keycode yang ditekan.

Dalam isyarat diatas sanggup dijelaskan menyerupai 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 yaitu 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 menciptakan shorcut keyboard sendiri dengan javascript. Kamu sanggup membuatkan semua keycode tersebut. Jika seseorang mengetik apa, maka akan berjalan isyarat apa. Semua bergantung kepada developer :)

Semoga bermanfaat! Terima Kasih!

Bagikan Artikel ini