Converting An Enter Key Press Into A Tab Key Press For Web Forms

How many times have you been filling out an online form and halfway through filling in your responses you accidentally press the Enter key which then attempts to submit the form?  This can be a common problem when the online form is wired up to have a “submit” button be the default form button on a page.

The most complete solution to this issue is having your submit process be able to handle all scenarios of submission (incomplete, invalid, etc).  If you are looking for a quick (partial) fix though, it is possible to trap the Enter key press and convert it to another key press (e.g. Tab key.)  A  few simple lines of JavaScript and adding a client-side event handler to your input controls can accomplish that.  I wish I could claim the credit for this, but I found this on many online resources (reference 1 and reference 2.)  Note: My example focuses on Internet Explorer; I have not tested against other browsers at this time.  Please read these references for more information on cross-browser compatibility.

ConvertVans1

My silly attempt at humor

First, you’ll need to add a JavaScript function to trap the Enter key press (keyCode 13) and convert it to a Tab key press (keyCode 9).  Since my current work is on SharePoint development I place most of my JavaScript functions into an external file (previous blog post details) to be referenced by web part code.  Below are two examples, first on an HTML or ASPX page (includes tag) and second in an external file (without tag.)

"JavaScript">

function ModifyEnterKeyPressAsTab() {

    if (window.event && window.event.keyCode == 13) {

        window.event.keyCode = 9;

    }

}


JavaScript block on HTML/ASPX page
function ModifyEnterKeyPressAsTab() {

    if (window.event && window.event.keyCode == 13) {

        window.event.keyCode = 9;

    }

}

JavaScript block in external file

    The next step is to call the above JavaScript function from an added client-side event handler to any input controls users will be filling out.  These input controls include textboxes, radio buttons, etc.  A client-side event handler (vs. server-side) are used so that  any key press will be intercepted before the server is able to respond (e.g. accept a premature form submit.)  Below is an example of adding the event handler to a Textbox.

TextBox textbox1 = new TextBox();

textbox1.Attributes.Add("onKeyDown", "ModifyEnterKeyPressAsTab();");

In the above example, any time a user has focus on the Textbox and presses a key our JavaScript function will be called.  If the key press is Enter, the function will return a Tab key press which moves focus to the next control in TabIndex order.  Note: Since we are converting to a Tab key press, you’ll want to make sure the TabIndex of your controls is set appropriately so user’s are progressed in the desired order down/across the page.

Conclusion

Converting your Enter key press into another key press, such as Tab, is a rather crude workaround to a common problem of early form submission, but it’s a starting point to alleviating issues your end users may run into.  If you read the resources I linked to above you’ll notice there is additional information on how to make this solution more cross-browser friendly (specifically for FireFox vs. IE.)  If you have any comments on this topic or found this post helpful, feel free to leave feedback below.

-Frog Out

12 thoughts on “Converting An Enter Key Press Into A Tab Key Press For Web Forms

  1. Originally posted on: https://briantjackett.com/archive/2010/01/27/converting-an-enter-key-press-into-a-tab-key-press.aspx#569493NotBob, In my scenario the client only had to work with Internet Explorer, hence why I reference this only applying to IE in paragraph two. I also linked to other resources for non-IE implementations. If you have additional resources or examples you think pertinent feel free to leave a comment with them.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s