Tab Key in ASP.NET

To make your Web application more efficient and easier to use, you need to remove any difficulty in web form navigation that your user could experience. User interface and web site navigation must be logical, easy to use and if possible: already well-known from other applications. Of course, nobody wants to learn some new complicated and unnecessary things and crawl through a large help files. Users wants self-explanatory interface that they can start to use immediately.

One of common standards is using a keyboard TAB key to move focus forward (or Tab + Shift key to move focus back) between controls on form, instead of forcing your Web site visitor to use a mouse click for changing a focus. Of course, your visitor still CAN use a mouse to set focus in some text box, but many of them, and they are usually experienced users like to use a tab key to move focus, because it is faster and more efficient way.

Tab order in web form

So, you need to define a logical navigation through a web form using a Tab key. There is a TabIndex property of server controls. First control in form should get lowest TabIndex. With every next tab, focus will move to the control with next higher value of TabIndex. It is pretty simple to set tab order, you need only to care about few common problems:

Problem 1: When we run the page, we can see there is no control with focus when web page is loaded. Much better solution is to have a focus on the right place immediately after page is loaded. Research about how you can set a focus initially and other focus issues you can see in Focus in ASP.NET tutorial. One solution, which shows how you can set a focus to textbox named txtFirstName, when page is loaded, could be a code like this:

[VB.NET]

Page.RegisterStartupScript("SetInitialFocus", _
"<script>document.getElementById('" & txtFirstName.ClientID & _
"').focus();</script>")

[C#]

Page.RegisterStartupScript("SetInitialFocus", "<script>document.getElementById('" + txtFirstName.ClientID + "').focus();</script>");

Problem 2: Focus moves through a web form, but also goes to Web browser address bar, Google or Yahoo toolbar etc. It is more expected that focus should move only inside the web form, instead to goes to browser's address bar.

Let say the last focus in on the button named "btnOK" and when user press tab key, we want to move focus again to the first control, textbox "txtFirstName" and skip focus in browser toolbars, address bars and other distraction things. You can do it with next piece of code:

[VB.NET]

btnOK.Attributes.Add("onkeydown", _
"if(event.which || event.keyCode)" & _
"{if ((event.which == 9) || (event.keyCode == 9)) " & _
"{document.getElementById('" & txtFirstName.ClientID & _
"').focus();return false;}} else {return true}; ")

[C#]

btnOK.Attributes.Add("onkeydown", "if(event.which || event.keyCode)" +
"{if ((event.which == 9) || (event.keyCode == 9)) " +
"{document.getElementById('"+ txtFirstName.ClientID +
"').focus();return false;}} else {return true}; ");

You don't want to move a focus to specific control?

For some reason, you don't want to some control receive a focus. That could be a case if, for example you have an invisible text box or some search text box on top of the web page, but you want to allow tab functionality only to few main controls on the web form. Simply set TabIndex property of server control, or tabindex attribute of HTML control to -1. When you run web page and hit tab key, controls with TabIndex = -1 will never get a focus. Although, user can click into this control with a mouse and set focus on that way.

Web form sample project of using TAB key

You can download sample "Contact form" Visual Studio 2003 or Visual Studio 2005 project which shows you how you can manage focus on page load and move the focus using the Tab key. The sample contains simple contact form. When you start web application, textbox named "txtFirstName" gets a focus when page is loaded. If you press Tab key, focus will move to the next control, depending of value of control's TabIndex property. When focus comes to the last control with the biggest TabIndex, it goes again to the first control, txtFirstName. There is also txtSearch textbox on the web form which never can be "tabbed" and can receive focus only with a mouse click in it.

How to type TAB key in textbox or textarea

Sometimes, you don't need to move cursor to the next control when hit Tab key. What if you need to type Tab character into text box or text area as a part of the text? Of course, your user can type tab in Notepad or some other text editor and simply do copy/paste to your form, but it is not so nice solution and users could say your application is not professional :). Instead of that, to type tab key in text box, you can use script like this (text box which accepts tab keys is named txtLongText):

[VB.NET]

txtLongText.Attributes.Add("onkeydown", _
"if(event.which || event.keyCode){if ((event.which == 9)" & _
"|| (event.keyCode == 9)) {document.getElementById('" & _
txtLongText.ClientID + "').selection = " & _
document.selection.createRange();" & _
txtLongText.ClientID & ".selection.text = " & _
" String.fromCharCode(9);return false;}} else {return true}; ")

[C#]

txtLongText.Attributes.Add("onkeydown",
"if(event.which || event.keyCode){if ((event.which == 9)" +
"|| (event.keyCode == 9)) {document.getElementById('"+
txtLongText.ClientID + "').selection = document.selection.createRange();" +
txtLongText.ClientID + ".selection.text = String.fromCharCode(9);return false;}} else {return true}; ");

Or better, to avoid hard coding, you can put this code to function named EnableTabType. Function has only one parameter, which specifies what is TextBox control where you need to enable typing of Tab characters.

[VB.NET]

Public Sub EnableTabType(tb As TextBox)
    tb.Attributes.Add("onkeydown", _
    "if(event.which || event.keyCode){if((event.which == 9)" & _
    "|| (event.keyCode == 9)) {document.getElementById('" & _
    tb.ClientID & "').selection=document.selection.createRange();" & _
    tb.ClientID & ".selection.text = " & _
    " String.fromCharCode(9);return false;}}else{return true};")
End Sub

[C#]

public void EnableTabType(TextBox tb)
{
    tb.Attributes.Add("onkeydown",
    "if(event.which || event.keyCode){if ((event.which == 9)" +
    "|| (event.keyCode == 9)) {document.getElementById('"+
    tb.ClientID + "').selection = document.selection.createRange();" +
    tb.ClientID + ".selection.text = String.fromCharCode(9);return false;}} else {return true}; ");
}

Tab key endnote

Default value of TextBox AutoPostBack property is false. If you set it to true and if text in TextBox control is changed, tab key will cause form to submit. After submitting, it is possible to lose a focus on current control, especially if you used javascript on page load to set focus initially. In that specific case, you can register client script dynamically when Page.IsPostBack value is true.

With Bean Software Shortcut Controls you can use TAB key as a keyboard shortcut to call ASP.NET server side code. Also, with these controls, you can manipulate different keyboard shortcuts like simple Enter, Tab or placing a focus in specific text box, or more complicated e.g. Ctrl + Shift + O or similar, just like shortcuts used in Visual Studio or Microsoft Word. Source code is included.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback | Google