simulate tab key from input box

[larkin]

Hi,
I have three input boxes, one for each part of a phone number, and I am trying to write a generic function that will jump to the next box when the previous one is filled.

So far I have this:
<INPUT type="text" name=ph1 size=3 maxlength=3 onkeyup="NextBox(this)"> -
<INPUT type="text" name=ph2 size=3 maxlength=3 onkeyup="NextBox(this)"> -
<INPUT type="text" name=ph3 size=4 maxlength=4 onkeyup="NextBox(this)">

and my function:
function NextBox(ctrl){
if (ctrl.value.length == ctrl.maxLength){
ctrl.onkeydown(9);
}

but this will not work. How do I create an event in IE or NS that will simulate a tab key (9) to send it to the next box?

[ShriekForth]

Using focus(), you could try something like this...

<form name=phones>
<INPUT type="text" name=ph1 size=3 maxlength=3 onkeyup="NextBox(this,'document.phones.ph2')"> -
<INPUT type="text" name=ph2 size=3 maxlength=3 onkeyup="NextBox(this,'document.phones.ph3')"> -
<INPUT type="text" name=ph3 size=4 maxlength=4 onkeyup="NextBox(this,'document.phones.ph1')">
</form>
<script>
function NextBox(ctrl,nextField){
if (ctrl.value.length == ctrl.maxLength){
eval(nextField+".focus();");
}
}


ShriekForth

[larkin]

I was afraid I might have to settle for this type of method, but I was hoping there was a more generic way to send a tab through an event.
??

[PauletteB]

Unless I'm missing the point...

tabIndex works in IE, and NN7, maybe other browsers as well.

<input type="text1" name="UserName" size="26" maxLength="50" tabIndex="1" .....

<input type="text2" tabIndex="2"

<input type="text3" tabIndex="3"

Can also be 0, or -1 to omit.

[larkin]

Well, originally I had tried setting the tabIndex properties and then using the input boxe's form1.ph1.blur() method but that didn't automatically tab to the next box when the first one was filled, it just took the focus off of it.
??

[adios]

Netscape (4) has a bad way with controlling caret placement, which makes manipulating keystroke entry nearly impossible. This script seems OK elsewhere, and just normal in Navigator:

http://javascript.internet.com/forms/auto-tab.html

My own (NS4 unsolved - got fed up):

http://www.codingforums.com/showthread.php?threadid=2798&highlight=phone+form

[larkin]

Ok, this looks pretty good. I should be able to work with this.

Thanks everyone.


ps

Does anyone know what this line:

input.form[(getIndex(input)+1) % input.form.length].focus();

is doing? I'm not familiar with the % syntax. It looks like this is setting by the next form index and not the next tabindex also. I'll have to take that into account.:thumbsup:

[PauletteB]

I did miss the point...

The qualifierautomatically tab

Sorry.

Paulette

[adios]

input.form // get form reference (from FormElement.form property)

[ // plug in Form.elements[] index number (using abbreviated 'Form[]' syntax) , calculated by:

(getIndex(input)+1) // calling getIndex(), which returns index position of current element (+1) by iterating through the form looking for a match with passed element reference

% input.form.length // and dividing by Form.[elements.]length & taking remainder (in case we're at the last element)

]

.focus(); // focus that next element

Modulus operator: http://www.wdvl.com/Authoring/JavaScript/Tutorial/operators.html

[larkin]

Ah, that's how it works.

Thanks.