DotNetCurry Logo

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: 29386
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.
  • Please Share this article if you think it was worth reading. Thanks!
Further Reading - Articles You May Like!
Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and a new one recently at The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigous Microsoft MVP award for nine times in a row now. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that represents premium web sites and digital publications comprising of Professional web, windows, mobile and cloud developers, technical managers, and architects.

Get in touch with him on Twitter @suprotimagarwal, LinkedIn or befriend him on Facebook



Page copy protected against web site content infringement by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
comments powered by Disqus
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!!!!!");
         }

});