Introduction
Last day when I saw a banking website that supports the function keys I thought to write an article on this topic. I don't know what platform they (the bank) are using but I thought to write it in ASP.NET.
I am going to consume the jQuery methods to make it possible. So, use the following steps to create this application.
Step 1:
Add reference to the jQuery file in the head section of the page, for example:
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
Step 2:
Add the following jQuery method in the head section of the page.
<script type="text/javascript">
$(function () {
$(document).keyup(function (e) {
var key = (e.keyCode ? e.keyCode : e.charCode);
switch (key) {
case 112:
navigateUrl($('a[id$=lnk1]'));
break;
case 113:
navigateUrl($('a[id$=lnk2]'));
break;
case 114:
navigateUrl($('a[id$=lnk3]'));
break;
default: ;
}
});
function navigateUrl(jObj) {
window.location.href = $(jObj).attr("href");
}
});
</script>
Step 3:
Here is the list of function keys and their key codes:
| Function key | Key code |
| F1 | 112 |
| F2 | 113 |
| F3 | 114 |
| F4 | 115 |
| F5 | 116 |
| F6 | 117 |
| F7 | 118 |
| F8 | 119 |
| F9 | 120 |
| F10 | This key is reserved by the system and cannot be used |
| F11 | 122 |
| F12 | 123 |
| F13 | 124 |
| F14 | 125 |
| F15 | 126 |
Step 4:
Design the page body as given below:
<p>
Press
<b>F1 for My Blog Page</b>
<br />
<b>F2 for My ASP.NET Posts Page</b>
<br />
<b>F3 for About Me Page</b>
</p>
<div>
<asp:HyperLink ID="lnk1" runat="server" NavigateUrl="http://www.itorian.com">My Blog</asp:HyperLink>
<br />
<asp:HyperLink ID="lnk2" runat="server" NavigateUrl="http://www.itorian.com/articles/aspdotnet/article.aspx">My ASP.NET Posts</asp:HyperLink>
<br />
<asp:HyperLink ID="lnk3" runat="server" NavigateUrl="http://www.itorian.com/about">About Me</asp:HyperLink>
</div>
Step 5:
Now, we are all set to run the project and check it. Let's look at my complete code.
Complete Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET & jQuery Post</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
$(document).keyup(function (e) {
var key = (e.keyCode ? e.keyCode : e.charCode);
switch (key) {
case 112:
navigateUrl($('a[id$=lnk1]'));
break;
case 113:
navigateUrl($('a[id$=lnk2]'));
break;
case 114:
navigateUrl($('a[id$=lnk3]'));
break;
default: ;
}
});
function navigateUrl(jObj) {
window.location.href = $(jObj).attr("href");
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
Press
<b>F1 for My Blog Page</b>
<br />
<b>F2 for My ASP.NET Posts Page</b>
<br />
<b>F3 for About Me Page</b>
</p>
<div>
<asp:HyperLink ID="lnk1" runat="server" NavigateUrl="http://www.itorian.com">My Blog</asp:HyperLink>
<br />
<asp:HyperLink ID="lnk2" runat="server" NavigateUrl="http://www.itorian.com/articles/aspdotnet/article.aspx">My ASP.NET Posts</asp:HyperLink>
<br />
<asp:HyperLink ID="lnk3" runat="server" NavigateUrl="http://www.itorian.com/about">About Me</asp:HyperLink>
</div>
</form>
</body>
</html>
I recommend you to download the attached file and check it. I hope you like it. Thanks.