Using Function Keys (F1, F2, F3 Etc) in ASP.NET Websites With the Help of JQuery

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.