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.
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..
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.
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!
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!
Post a Comment