Tab Automatically To Next Object on Form

ritag · August 3rd, 2004, 04:06 PM

Hi.

Is there a way to automatically tab to the next object on a form when the text box has data entered that reaches the maximum characters allowed for that text box (using "maxlength")?

I have a phone number group of text boxes and would like the focus to move to the next text box once information is entered into a box.

<input class="in32" name="phonearea" maxlength="5" value="( )">&nbsp
<input class="in32" name="phone1st" maxlength="3"> -
<input class="in40" name="phone2nd" maxlength="4"> x
<input class="in40" name="phoneext" maxlength="5">

TIA.

Rita

meow · August 4th, 2004, 03:31 AM

I imagine JavaScript can do this. (Can't help - my JS is lousy.)

Are you sure you want to do this though? What if the user makes a typo and want to correct it and he's typing in the next field before he knows it? I can only speak for myself but I find things like this annoying and often confusing. As an example, maybe I don't fill in the fields in the order you have them but in the order I have them in the program where I store personal data.

Just wanted to warn you against helping the user too much. It can often have the opposite effect.

(o<
//\ =^..^=

ChrisScott · August 4th, 2004, 03:36 AM

Hi Rita,

Meow's is a good point, but if you really want to do it, try this...

Code:

function TabAfterMaxLength(pTextBox){
    if(pTextBox.value.length == pTextBox.maxLength){
        var els = pTextBox.form.elements;
        for(var i = 0; i < els.length; i++){
            if(els[i] == pTextBox){
                if(els[i + 1]){
                    els[i + 1].focus();
                }
            }
        }
    }
}

...

(<input class="in32" name="phonearea" maxlength="5" onkeyup="TabAfterMaxLength(this);">)&nbsp
<input class="in32" name="phone1st" maxlength="3" onkeyup="TabAfterMaxLength(this);"> -
<input class="in40" name="phone2nd" maxlength="4" onkeyup="TabAfterMaxLength(this);"> x
<input class="in40" name="phoneext" maxlength="5" onkeyup="TabAfterMaxLength(this);">

n.b. I placed your brackets outside the phonearea box as otherwise the tab would be triggered as soon as you enter it.

HTH,

Chris

ritag · August 4th, 2004, 09:49 AM

Thanks for both the responses. Meow certainly has a good point that I never thought about. I'll apply the code and then decide whether to leave it in or not. The form that the code will be in will only be used a couple of times a year so I'll takes that in consideration too.