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.