Click to See Complete Forum and Search --> : making it move to the next text box


pwned
08-05-2003, 04:44 PM
how would you make the focus the next text box in the elements array when you enter information in one

Mr J
08-05-2003, 04:54 PM
Do you mean something like this?


<script language="JavaScript">
<!--
function advance(currentField,nextField) {
if (document.myForm[currentField].value.length == 3)
document.myForm[nextField].select();
}
//-->
</script>

<form name="myForm">
<input type="text" name="t1" maxlength="3" size="3" onclick="select()" onKeyUp="advance('t1','t2')">
<input type="text" name="t2" maxlength="3" size="3" onclick="select()" onKeyUp="advance('t2','t3')">
<input type="text" name="t3" maxlength="3" size="3" onclick="select()" onKeyUp="advance('t3','t4')">
<input type="text" name="t4" maxlength="3" size="3" onclick="select()" >
</form>

pwned
08-05-2003, 05:40 PM
I sort of understand that....But is there anyway you could explain it in more depth.
Thanks for the fast answer
Eric

Mr J
08-06-2003, 10:00 AM
Within each input there is a onkeyup event which tells the script which field is being monitored (t1) and which is the next field (t2).

onKeyUp="advance(t1,'t2')"

If the length of the monitored Fields value equals 3 then focus on next Field

The script limits all inputs to three characters.

If you want difference limits then the following script should be used

<script language="JavaScript">
<!--

function advance2(currentField,nextField,olength) {
if (document.myForm2[currentField].value.length == olength)
document.myForm2[nextField].select();
}
//-->
</script>

<form name="myForm2">
<input type="text" name="t1" size="6" onclick="select()" onKeyUp="advance2('t1','t2',1)">
<input type="text" name="t2" size="6" onclick="select()" onKeyUp="advance2('t2','t3',2)">
<input type="text" name="t3" size="6" onclick="select()" onKeyUp="advance2('t3','t4',3)">
<input type="text" name="t4" maxlength="6" size="6" onclick="select()">
</form>


Notice that the onkeyup event has an extra argument

onKeyUp="advance2('t1','t2',1)">

This is the limit applied to that textbox



Please note that I have amended the script in my previous post due to a slight oversight

I hope my explanation is helpful but if you need more let me know

pwned
08-06-2003, 07:40 PM
K thanks a lot...I totally understand now
And heres (http://polturk-pad.dyndns.org/java/crossword.html) the result
Nothing special
But I'm still a n00b :D
Eric

Mr J
08-07-2003, 04:58 AM
Glad to be of help

:)