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.

Tags: .NET, Dev, HTML CSS