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.