Using Shortcut Key in Web Applications Using jQuery

Introduction

Comparing Web Applications to Windows Applications has always been a debated topic. Now, I'm trying to add one more topic in this debate.

We can add Keyboard Shortcuts to our Web Application (Websites) so that when the user types the first letter, we will have the page behave as if the corresponding button was pressed/clicked.

We need to know which key was pressed when our keyup handler gets triggered. We can inspect the event object for this. The .keyCode property of the event contains an identifier for the key that was pressed and for alphabetic keys; this identifier is the ASCII value of the uppercase letter. So we can create a map or object literal of letters and their corresponding buttons to press/click. When the user presses a key, we will see if its identifier is in the map and if so, trigger the action.

Now, I'm going to add this feature to one of my the articles "Example on jQuery Event Bubbling Situation". Download the attachment from there. This article has a mouse click event already so I'm going to implement it to create keyboard shortcut functionality too.

Let's begin and add the following jQuery code to an existing project that you have downloaded.

Now, look at the animated image that works for me.

I hope you like it. Thanks.