Adding Keyboard Shortcuts To Your Website With Mousetrap


There are many websites which offers keyboard shortcuts for performing various actions. You can take the example of Facebook and Gmail for this. Few blogs also offer post navigation via left and right arrow keys. If you also want to add keyboard shortcuts in your website, you can try adding it with jQuery. No, you do not need to do it manually if you can do it easily with Plugin. Mousetrap is a nice jQuery plugin which lets you easily add keyboard shortcuts in your application. There is nothing complicated in this.


Use of the plugin is very simple. You only need to include JS file and then add JS functions to use. If you want to test in offline, you can download from here.

After including this you can bind keyboard shortcut in any key by using the code below. Below code uses bind that binds a specified keyboard command to a callback function.

You can also use sequence of keys to perform an action like below:

You can also try multiple key combinations like this:

You can also bind multiple Keyboard shortcuts to perform same action by using the code below:

Now it depends on you how to use. You can use action code as per your need. You can also call other function via keyboard shortcuts by using the code similar to below code.



Mousetrap has been tested in following browsers.


  • Internet Explorer 6+
  • Safari
  • Firefox
  • Chrome



Written by Deepanker

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

Leave a Reply

Your email address will not be published. Required fields are marked *


5 Free Online Notepad Websites

Sticky Widget WordPress

How to Create a Sticky Floating Sidebar Widget in WordPress