Home Contact

The Frog Pond of Technology

Ripples of Knowledge for SharePoint and Other .Net Technologies

News

 Subscribe to this blog


About Me

Name:
Brian T. Jackett
Location:
Columbus, OH
Company:
Microsoft

Find me on...

Tag Cloud


Archives

Post Categories

Syndication:

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 <script> tag) and second in an external file (without <script> tag.)

<script language="JavaScript">
function ModifyEnterKeyPressAsTab() {
    if (window.event && window.event.keyCode == 13) {
        window.event.keyCode = 9;
    }
}
</script>
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


Wednesday, January 27, 2010 11:50 PM

Feedback

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

several years ago the enter key worked like the tab key.
It was very convenient to have it that way. somehow it changed and i would like to get it back
thanks
Herb 7/12/2010 9:10 AM | Hernb Cole

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

Thank you.I'm looking for javascript to change ENTER to TAB. It's work !! 12/5/2010 1:00 PM | Arief Budianto

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

Sorry, this ONLY works for IE, which makes it less than useful for 80% of all browsers. 3/18/2011 8:34 AM | NotBob

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

NotBob,

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.
3/21/2011 11:41 PM | Brian T. Jackett

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

We had this working on our site for a while (our users come from a green screen system where the enter key moves to the next field and they really like this feature). The problem now is that it looks like this doesn't work in IE9 since the keycode property is read-only. Any ideas how to get around it? 10/31/2011 1:17 PM | Dlord

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

Dlord,

The below forum post shows a way to trap the Enter keystroke and re-dispatch a new keyboard event. I have not tried myself but this may help in your testing.

http://stackoverflow.com/questions/5347857/how-do-i-convert-enter-to-tab-with-focus-change-in-ie9-it-worked-in-ie8
11/1/2011 8:50 PM | Brian T. Jackett

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

thanks its work 12/24/2011 4:03 AM | ManojSemwal

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

you've saved life again in same style who were saved 5 years ago. My suggestion is, try to do something new. write this script to work in firefox. 6/6/2012 12:20 PM | Monjur

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

Monjur,

Take a look at the "reference 2" link in second paragraph for working with Firefox.
6/29/2012 10:15 AM | Brian T. Jackett

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

Thank You... 11/17/2012 12:57 PM | Rajib Siraji

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

Thank you very much your code helped me very very much. 8/27/2013 5:40 PM | MK

# re: Converting An Enter Key Press Into A Tab Key Press For Web Forms

This seems to no longer work in IE11. Does anyone know how to get this working in IE11? 2/5/2014 12:42 PM | David

Post A Comment
Title:
Name:
Email:
Comment:
Verification: