Posted in Jquery

Adding Keyboard Shortcuts To Your Website With Mousetrap

Adding Keyboard Shortcuts To Your Website With Mousetrap Posted on March 12, 2015Leave a comment

Deepanker Verma is the CEO of Techlomedia and a full time blogger. On this blog, he shares web design resources, SEO tips blog monetization tips.

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.

 

Advertisement

BROWSER SUPPORT

Mousetrap has been tested in following browsers.

  • Internet Explorer 6+
  • Safari
  • Firefox
  • Chrome

Mousetrap

advertisement

Deepanker Verma is the CEO of Techlomedia and a full time blogger. On this blog, he shares web design resources, SEO tips blog monetization tips.

Leave a Reply

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

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!