Membuat Keyboard Shortcut Menggunakan jQuery Mousetrap

Plugin jQuery Mousetrap adalah plugin jQuery yang berfungsi untuk menambahkan Keyboard Shortcut pada halaman website kalian. Nah pada kesempatan kali ini saya akan memberikan contoh bagaimana caranya membuat Keyboard Shortcut pada halaman website menggunakan jQuery Mousetrap. Cara nya sangat mudah sekali, disini saya akan menggunakan Framework CSS Bootstrap untuk membuat tampilan Website nya.

Pada contoh yang akan saya buat, jika kalian menekan keyboard J atau K maka kalian akan melihat perubahan pada tampilan Post, sedangkan jika kalian menekan keyboard T maka kalian akan mentweet Post yang sedang kalian pilih. Nah pada contoh tersebut saya juga akan memberikan keterangan atau bantuan Keyboard Shortcut apa saja yang ada di halaman contoh website tersebut, kalian cukup menekan keyboard shift + ? untuk memunculkan keterangan tersebut.

Pertama kalian bisa membuat tampilan website nya seperti gambar di bawah ini.

Selanjutnya kalian bisa menghubungkan file jQuery Mousetrap nya dengan HTML yang sudah kalian buat. Di sini saya menggunakan Plugin jQuery Mousetrap CDN untuk membuat contoh halaman website tersebut.

Dan yang terakhir kalian bisa buat file javascript dan tuliskan script di bawah ini di dalam file javascript tersebut dan kalian bisa menghubungkan kembali javascript tersebut di HTML kalian.

Demo | Download