Using Shortcut Key in Web Applications using jQuery
Introduction
Comparing Web Applications to Windows Applications has
been always a debate 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 user types first letter, we will have the page behave
as if the corresponding button were 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 my one of the
article "Example on jQuery Event Bubbling Situation".
Download the attachment from there. This article has mouse click event already
so I'm going to implement it to create keyboard shortcut functionality too.
Let's begin and add following jQuery code to existing project
that you have download.
Now, look at the animated image that works for me.
I hope you like it. Thanks.
Comments
Post a Comment