Implementing KeyBoard Shortcuts on an ASP.NET Hyperlink Control using jQuery

Posted by: Suprotim Agarwal , on 11/2/2009, in Category jQuery and ASP.NET
Views: 26703
Abstract: Popular Web apps like Gmail and Windows Live Mail feature Keyboard shortcuts, which help you save time by executing common operations using the Keyboard, without having to switch between the keyboard and mouse.
Implementing KeyBoard Shortcuts on an ASP.NET Hyperlink Control using jQuery
 
Popular Web apps like Gmail and Windows Live Mail feature Keyboard shortcuts, which help you save time by executing common operations using the Keyboard, without having to switch between the keyboard and mouse. In this short article, I will demonstrate how to use jQuery to implement keyboard shortcuts on an ASP.NET Hyperlink control. This article is a sample chapter from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls 
Note that for demonstration purposes, I have included jQuery code in the same page. Ideally, these resources should be created in separate folders for maintainability.
Let us quickly jump to the solution and see how we can implement KeyBoard shortcut on the Hyperlink control
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Implement KeyBoard Shortcuts on Hyperlinks</title>
    <script type='text/javascript'
        src='../Scripts/jquery-1.3.2.min.js'>
    </script>
   
    <script type="text/javascript">
        $(function() {
            $(document).keyup(function(e) {
                var key = (e.keyCode ? e.keyCode : e.charCode);
                switch (key) {
                    case 49:
                        navigateUrl($('a[id$=linkA]'));
                        break;
                    case 50:
                        navigateUrl($('a[id$=linkB]'));
                        break;
                    case 51:
                        navigateUrl($('a[id$=linkC]'));
                        break;
                    default: ;
                }
            });
            function navigateUrl(jObj) {
                window.location.href = $(jObj).attr("href");
                alert("Navigating to " + $(jObj).attr("href"));
            }
        });       
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div class="tableDiv">
        <h2>Use Keyboard Keys 1, 2 or 3 to invoke respective
            websites</h2><br />
        <asp:HyperLink ID="linkA" runat="server"
            NavigateUrl="http://www.dotnetcurry.com">
            DotNetCurry</asp:HyperLink><br /><br />
        <asp:HyperLink ID="linkB" runat="server"
            NavigateUrl="http://www.sqlservercurry.com">
            SqlServerCurry</asp:HyperLink><br /><br />
        <asp:HyperLink ID="linkC" runat="server"
            NavigateUrl="http://www.devcurry.com">
            DevCurry</asp:HyperLink><br /><br />
    </div>
   
    </form>
</body>
</html>
Implementing a Keyboard shortcut in jQuery is relatively simple as shown here. The code first captures the keyup event and the key is detected using the keyCode or charCode.
$(document).keyup(function(e) {
    var key = (e.keyCode ? e.keyCode : e.charCode);
In the code shown below, if the key = 49, digit 1 is pressed by the user and the first Hyperlink is auto-clicked. Similarly if the key = 50 or 51, then digit 2 or 3 are pressed respectively and the 2nd or 3rd hyperlink is autoclicked. Once the key matches any of the switch case statement, the function navigateUrl() is called passing in the respective hyperlink control object to the function. So if the user pressed 1, the first hyperlink control object is passed to the function as shown below:
switch (key) {
    case 49:
        navigateUrl($('a[id$=linkA]'));
        break;
The navigateUrl function looks like this:
function navigateUrl(jObj) {
    window.location.href = $(jObj).attr("href");
}
The function accepts the hyperlink object and sets the ‘window.location.href’ to the href attribute of the Hyperlink passed in. This is how we invoke actions with shortcut keys.
Tip: keyCode represents the actual key pressed as a numerical value, whereas charCode gives the ASCII/Unicode value of the key press result (for eg: Shift + A). Firefox and other browsers also support ‘e.which’. IE and Opera does not support charCode.
Keyboard shortcuts improve productivity by accomplishing tasks more quickly and without much effort. In applications, where the user has to select from a variety of actions to perform, keyboard shortcuts can save on time and effort.
You can see a Live Demo over here. The entire source code of this article can be downloaded over here
I hope you found this article useful and I thank you for viewing it. This article was taken from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls which contains similar recipes that you can use in your applications.
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, DNC .NET Magazine, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls. and is authoring another one at The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Michael Guilfoyle on Monday, November 2, 2009 10:16 AM
Good job and great information here.

<a href=" http://www.m6.net/"> ASP Hosting on Windows at M6.Net </A>
Comment posted by jalpesh vadgama on Friday, December 25, 2009 2:54 AM
There is same kind of thing can be done by access keys from asp.net 2.0.  See the following article then why we need this kind of thing.

http://www.beansoftware.com/ASP.NET-Tutorials/Keyboard-Shortcut.aspx
Comment posted by Sangam Uprety on Friday, December 25, 2009 3:13 AM
This works if I am pressing 1,2 or 3 from the upper rows in the keyboard.
But it failed when I pressed 1, 2, and 3 from the extreme right of the keyboard.
It is surprising. Later I checked the key code for the numbers from right part of keyboard, I got 97, 98 and 99 for 1,2 and 3 respectively. I guess you should include this choice also in your code.

Thanks.
Comment posted by Suprotim Agarwal on Friday, December 25, 2009 6:37 AM
Jalpesh: We are not just focusing but also performing an action on that control. The Accesskeys will only focus on that control. Moreover you have to use Alt+Key whereas in our example, that is not required.

Sangam: The code gives you an understanding of how shortcuts can be implemented using jQuery. It can be extended as desired.
Comment posted by David Jacob Jarquin on Tuesday, December 29, 2009 4:04 PM
Code if you want to use ctrl + key

Utils.addEvent(document,'keydown',function(e){
         var keyID = (window.event) ? event.keyCode : e.keyCode;
         var ctrlKey = (window.event) ? event.ctrlKey : e.ctrlKey;
         if((keyID == 73)&&(ctrlKey == true)) {
            alert("This is shorcut!!!!!");
         }

});

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel