Using Function Keys (F1-F2-F3 etc) in ASP.NET Websites with the help of jQuery
Introduction
Last day when I saw a banking website that supports the function
keys I thought to write a post on this topic. I don’t know what platform they
(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,
follow the steps to create this application.
Step 1
Add the reference of 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 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 its key code:
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, all we set to run the project and check it. Let’s look at
my complete codes.
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.
Nice one.. :)
ReplyDelete