Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


form elements

How to make enter behave like tab in dynamic form by jonto786
Posted: 9 Aug 05 (Edited 9 Aug 05)

I found a solution that seems to work fine with Internet Explorer. The problem I needed to solve was to make the enter-key behave like the tab-key in a form. The problem was that since the form could look different depending on previous user input I was unable to know the tabindex of the next field for sure (the "steps" in the tabindex could be 1, 5 or 10 between form fields). Also I was unable to use the .element[] feature of the form to find the correct (next) field by just getting the next element in the array.
The forms[0] reference of course gets the first form in the document and is hardcoded in this code, you may choose to make a more clever function, I didn't bother...

I trigger this function on the "onKeyup()" event like this (placed in the <form> tag) onkeyup="tabIfEnter(event)".

Here is the Script code to make it work:

function tabIfEnter(event)
    if(event && event.which)
        var e=window.event;
        var charCode=e.which;
        var e=window.event;
        var charCode=e.keyCode;
    if (charCode == 13)
        var x = document.forms[0].length;
        var nextElement = document.forms[0].elements[x-1]; //Gets the last element in the form
        var currentTabIndex = window.event.srcElement.getAttribute('tabindex'); // Gets the tabindex of current field
        //if current field is the last set focus on the first in the form
        if (window.event.srcElement.name == nextElement.name)

        //find a field that has a tabindex higher than current field and lower than the last (or any found previously)
        //by looping through entire form
        for(elementnum = 0; elementnum < x; elementnum++)
                if ((document.forms[0].elements[elementnum].getAttribute('tabindex') > currentTabIndex) &&
                    (document.forms[0].elements[elementnum].getAttribute('tabindex') < nextElement.getAttribute('tabindex')))
                    //replace with better match than the one we had
                    nextElement = document.forms[0].elements[elementnum];
        window.event.srcElement.focus(); //set focus on current field

Hope it can save somebody else some time. I haven't tried the script on any other platforms than IE since it is only used in an intranet.


Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close