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
<head runat="server">
<title>Implement KeyBoard Shortcuts on Hyperlinkstitle>
<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
websitesh2><br />
<asp:HyperLink ID="linkA" runat="server"
DotNetCurryasp:HyperLink><br /><br />
<asp:HyperLink ID="linkB" runat="server"
SqlServerCurryasp:HyperLink><br /><br />
<asp:HyperLink ID="linkC" runat="server"
DevCurryasp: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
