Adding Keyboard Shortcuts To Your Website With Mousetrap

Best WordPress Hosting

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.

Mousetrap

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.

 

BROWSER SUPPORT

Mousetrap has been tested in following browsers.

  • Internet Explorer 6+
  • Safari
  • Firefox
  • Chrome

Mousetrap

advertisement

About The Author

  • ADD YOUR COMMENT

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Receive fresh web design resources and SEO tips in your email by our weekly newsletter

You have Successfully Subscribed!