Assign Shortcut key for ASP.Net Page Using Javascript

时间：2010-08-23 来源：yuzhangqi

Shortcut key gives end user more friendly interactions and performance. In this blog I will demonstrate how to implement a shortcut key access for ASP.NET page controls, using Javascript.

Detecting keystrokes

The key point here is to capture window event of web browser.

As we all know, browser vendors start experimenting when there's no official standard, and these experiments, though occasionally useful, also cause incompatibilities. The key events are no exception: there are currently two properties that give information about the pressed keys, and although there's some justification for this duplication, not all browsers support them in the same way.

In addition, there are a few important differences between the keydown and keyup events on one hand, and the keypress event on the other.

Finally, there are important differences between Windows and Mac. In general, detecting keys on Mac is much, much more difficult than on Windows.

keyCode and charCode

The two properties are keyCode and charCode. Put (too) simply, keyCode says something about the actual keyboard key the user pressed, while charCode gives the ASCII value of the resulting character. These bits of information need not be the same; for instance, a lower case 'a' and an upper case 'A' have the same keyCode, because the user presses the same key, but a different charCode because the resulting character is different.

Explorer and Opera do not support charCode. However, they give the character information in keyCode, but only onkeypress. Onkeydown and -up keyCode contains key information.

ShortCut Key Implement

1. shortcutkey.js

if(window.captureEvents) {
window.captureEvents(Event.KeyUp);
window.onkeyup = executeCode;
}
else if (window.attachEvent) {
document.attachEvent('onkeyup', executeCode);
}

function GoTo(url) {
window.open(url,'','width=600,height=400');
}

2. ASP.NET Page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<head runat="server">
<title></title>
<script language="javascript" src="shortcutkey.js"></script></head>
<body>
<form id="form1" runat="server">
<div>
<a id="linkToSina" href="javascript:void(0);" onclick="GoTo('http://sina.com.cn');">www.sina.com (L)</a> <br />
<a id="linkToSohu" href="javascript:void(0);" onclick="GoTo('http://sohu.com');">www.sohu.com (E)</a><br />
<a id="linkToGoogle" href="javascript:void(0);" onclick="GoTo('http://google.com');">www.google.com (C)</a><br />
<a id="linkToBaidu" href="javascript:void(0);" onclick="GoTo('http://www.baidu.com');">www.baidu.com (A)</a><br />
<a id="linkToMicrosoft" href="javascript:void(0);" onclick="GoTo('http://www.microsoft.com');">www.microsoft.com (S)</a><br />
<a id="linkToItpub" href="javascript:void(0);" onclick="GoTo('http://itpub.net');">www.itpub.net (Alt+N)</a><br />
</div>
</form>
</body>
</html>

Conclusion

1. using window.captureEvents or document.attachEvent to capture keyboard event.

2. Event keyUp,keyDownevent has different keyCode from keyPress.

3. You can use a single key such as "A" as shortcut key, either a combine keys such as "Alt+N" as shortcut key.

4. Alt-key,Ctrl-key maybe conflict with the shortcut keys built in web browswe for example IE and Firefox.

References

http://www.quirksmode.org/js/keys.html

http://www.dotnetcurry.com/ShowArticle.aspx?ID=91&AspxAutoDetectCookieSupport=1

Download Source Code