Using Keypad Enter as Tab Instead

Like most hacks, this one is laughably simple. So simple in fact that I never imagined it would work. The scenario: an ASP.NET web application with numeric entry fields. The users prefer to use the keypad Enter key to move to the next field, instead of the Tab key.

The answer: a little tiny snippet of Javascript in the onkeydown event:

if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13))
{
event.keyCode=9;
}

Hilarious huh? Rather than some sort of nice MoveToNextField code, we simply grab all Enter key events (keyCode 13), and modify them so they behave like Tab key events (keyCode 9).

For all you ASP.NET lackies out there, I’ve even whipped up a little helper method that will jam this javascript into any old server-side control (stick it in some sort of helper class and call it lilke MyHelperClass.TabOnEnterKey( myTextBox )):

/// 
///     This causes the enter key to behave like the tab key for an input control.
/// 
///

///     This is the textbox to have modified enter key behavior. It doesn't have to be a TextBox control, but must be derived from either HtmlControl or WebControl,
///     and the html control should accept an 'onkeydown' attribute.
///
public static void TabOnEnterKey( Control TextBoxToModify )
{
// This is our javascript - we fire the client-side click event of the button if the enter key is pressed.
string jsString = "if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {event.keyCode=9;} ";
// We attach this to the onkeydown attribute - we have to cater for HtmlControl or WebControl.
if (TextBoxToModify is System.Web.UI.HtmlControls.HtmlControl)
((System.Web.UI.HtmlControls.HtmlControl)TextBoxToModify).Attributes.Add("onkeydown",jsString);
else if (TextBoxToModify is System.Web.UI.WebControls.WebControl)
((System.Web.UI.WebControls.WebControl)TextBoxToModify).Attributes.Add("onkeydown",jsString);
else
{
// We throw an exception if TextBoxToTie is not of type HtmlControl or WebControl.
throw new ArgumentException("Control TextBoxToModify should be derived from either System.Web.UI.HtmlControls.HtmlControl or System.Web.UI.WebControls.WebControl", "TextBoxToModify");
}
}

The caveat: I’m pretty sure this only works in Internet Explorer ๐Ÿ™ The property to look for in Firefox is event.charCode, but that property is readonly. I imagine the cross-browser hack would probably have something to do with passing the id for the next field into the handler for the enter key. Not nice if your fields are auto-generated.

18 Replies to “Using Keypad Enter as Tab Instead”

  1. I like this… can you make it so one ENTER act as tow TABS ?
    I have been trying this… but no luck…. I look forward to seeing how this works.

  2. Interesting. Do you want ALL your controls on the page to have this double tab behaviour? If not, I’d suggest just doing some sort of manual focus change from the control that needs a double tab

    If you need double tabs from all controls, then I’m not sure how best to do it sorry!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.