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.
Membuat tombol shortcut dengan javascript
Biar tidak penasaran, langsung saja kita coba membuatnya yuk.. Buat file index.php dengan kode sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!doctype html> <html> <head> <title>Shortcut - harviacode.com</title> </head> <body> <h1>HALAMAN HOME</h1> <p>Silahkan tekan tombol Esc untuk keluar aplikasi.</p> <script> document.onkeydown = function (e) { switch (e.keyCode) { // escape case 27: setTimeout('self.location.href="logout.php"', 0); break; // f12 case 123: setTimeout('self.location.href="help.php"', 0); break; } //menghilangkan fungsi default tombol e.preventDefault(); }; </script> </body> </html> |
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
|
|
|
Silahkan dicoba, jangan lupa dilike dan dishare ya.. Terima kasih telah berkunjung ke harviacode.com.
Kalo kombinasi gimana oom ??
misal Alt/Ctrl+Q atau Alt/Ctrl+L
belum pernah coba sih kalo model itu mas.. paling model urutan aja, jadi kayak konami code yang pernah saya tulis di sini