Keyboard Shortcut in ASP.NET

Keyboard shortcuts are well known facility in Windows desktop applications and make application user's life much easier. Although beginners like to use a mouse, that habit usually disappear after some time when user becomes more experienced, because keyboard shortcuts enables faster and more efficient work. Many Windows applications, including Visual Studio .NET have so called "Expert Mode" when all toolbars and other visuals aids become invisible and user uses keyboard only.

Keyboard shortcuts are not used that much on Web applications. One of the most popular shortcuts used on web pages is using an Enter keyboard key to submit a web form. If you try some search on Google, after you insert a search terms in search text box, you can press Enter key instead of taking a mouse to click on the Search button. Complete research of Enter key issue you can find in Enter Key in ASP.NET tutorial. One more common shortcut on web pages is using a TAB key to move focus between a controls on a web form.

You don't need to be limited to this two cases only. You can implement shortcuts in your ASP.NET Web application like it is classic desktop application. Your Web application will be more efficient for experts, more accessible for people with disabilities and generally looks more professional if all functions can be easily accessed through a keyboard and through a mouse click Of course, there are some problems, not known in desktop environment. For example, your shortcut can call server ASP.NET function, client javascript or even call server Ajax function with client code. Also, some shortcuts are already reserved by Web browser. If you press CTRL + O in Internet Explorer or Firefox, you will get browser's Open file dialog, so obviously you can't use CTRL + O shortcut in your Web application.

To use shortcuts in your web application, there are some simple solutions, already implemented in HTML. One of them is using of Access Keys.

Access Keys [Alt + Key]

Access keys are common way to enable keyboard shortcuts on your web page. In short, site visitor can press Alt + some key to get a button clicked or get focus to some textbox. Both ASP.NET 1.1 and ASP.NET 2.0 provide AccessKey property for buttons and text boxes. ASP.NET 2.0 has additional AssociatedControlID property, used in Label control to specify which control will be clicked or get focus.

Access Keys ASP.NET 1.1 example (also works in ASP.NET 2.0)

<asp:Label ID="WonderfulLabel" runat="server" 
  Text="My <u>W</u>onderful function [ALT + W]">
</asp:Label><br />
<asp:Button AccessKey="W" ID="btnWonderful" runat="server"></asp:Button>

Access Keys ASP.NET 2.0 example

<asp:Label ID="WonderfulLabel" runat="server"
  AccessKey="W"
  AssociatedControlID="btnWonderful"
  Text="My <u>W</u>onderful function [ALT + W]">
</asp:Label><br />
<asp:Button ID="btnWonderful" runat="server"></asp:Button>

So, in example above, button btnWonderful will be clicked when ALT + W is pressed.

You should avoid keys reserved by Web browser. Internet Explorer 6 uses F, E, V, T and H to open File, Edit, View, Tools and Help menu items. Firefox uses additional G and B to call its Go and Bookmark menus.

More advanced shortcuts, using Ctrl, Alt and Shift

As you saw, Alt + Key shortcuts are pretty simple to implement, but what is with other key combinations, which use Ctrl or Shift key, or even their combinations? To achieve that, we must use a little javascript client code. The first question is, how to detect what Web site visitor pressed on its keyboard?

I wrote small javascript listing, which detects Ctrl, Alt, Shift and character pressed. You can copy and paste it to .aspx file, but it is not limited to ASP.NET project. It works in any static HTML or even PHP page too, because uses client javascript only. See it online at Detect SHIFT, ALT, CTRL & character key example.

First, I added handlers for keydown and keyup events and declare variables for storing state of keys:

       document.onkeydown = KeyDownHandler;
       document.onkeyup = KeyUpHandler;

        var CTRL = false;      
        var SHIFT = false;     
        var ALT = false;
        var CHAR_CODE = -1;

Second important thing, is to add functions KeyDownHandler and KeyUpHandler:

        function KeyDownHandler(e)
        {
            var x = '';
            if (document.all)
            {
                var evnt = window.event;
                x = evnt.keyCode;
            }
            else
            {
                x = e.keyCode;
            }
            DetectKeys(x, true);
        }
       
        function KeyUpHandler(e)
        {
            var x = '';
            if (document.all)
            {
                var evnt = window.event;
                x = evnt.keyCode;
            }
            else
            {
                x = e.keyCode;
            }
            DetectKeys(x, false);
        }

Finnaly, place state of the keys to variables, using DetectKeys function:

        function DetectKeys(KeyCode, IsKeyDown)
        {           
            if (KeyCode == '16')
            {
                SHIFT = IsKeyDown;
            }
            else if (KeyCode == '17')
            {
                CTRL = IsKeyDown;
            }
            else if (KeyCode == '18')
            {
                ALT = IsKeyDown;
            }
            else
            {
                if(IsKeyDown)
                    CHAR_CODE = KeyCode;
                else
                    CHAR_CODE = -1;
            }
       }

Shortcut Enabled ASP.NET Custom Controls

To speed up implementation of javascript used above, it is good idea to build shorcut enabled ASP.NET custom controls, that inherits standard controls. That is subject of the our next tutorial