how to move cursor from one textbox to another [Archive]

View Full Version : how to move cursor from one textbox to another

reigalz

10-29-2002, 12:36 PM

hi :D
i'm creating four textboxes and the user can enter only four digits in each textbox. So when the user enter four digits in the first text box, how do i move the cursor automatically to the second textbox. can anyone help? thanks alot!!

joh6nn

10-29-2002, 01:01 PM

this is off the top of my head, and untested, but it's a step in the right direction. i think.

<input type="text" name="t1" onkeyup="next(this);" maxlength="4">
<input type="text" name="t2" onkeyup="next(this);" maxlength="4">
<input type="text" name="t3" onkeyup="next(this);" maxlength="4">
<input type="text" name="t4" maxlength="4">

function next(that) {
if ( that.value.length == 3) {
that.form.elements[that.name++].focus();
}
}

this has to be done on keyup, because keypress is notoriously unreliable, and if you try to do it on keydown, then, if you have to shift focus to the next box, then you'll lose the value of the key currently being pressed.

reigalz

10-29-2002, 01:17 PM

Originally posted by joh6nn
this is off the top of my head, and untested, but it's a step in the right direction. i think.

<input type="text" name="t1" onkeyup="next(this);" maxlength="4">
<input type="text" name="t2" onkeyup="next(this);" maxlength="4">
<input type="text" name="t3" onkeyup="next(this);" maxlength="4">
<input type="text" name="t4" maxlength="4">

function next(that) { ----->>>>>>>>>> ??
if ( that.value.length == 3) {
that.form.elements[that.name++].focus();
}
}

this has to be done on keyup, because keypress is notoriously unreliable, and if you try to do it on keydown, then, if you have to shift focus to the next box, then you'll lose the value of the key currently being pressed.

what is "this" in the next()? izzit the form name or the text box name?

regards

aEr_aEr

10-29-2002, 01:22 PM

this is the ellement

so in :
<input type="text" name="t1" onkeyup="next(this);" maxlength="4">
is this "t1"

joh6nn

10-29-2002, 01:31 PM

the "this" inside of the next(), refers to the input box. it's sort of saying, ok, call the next() function, and tell it that this input box is the one that key was pressed in.

chrismiceli

10-29-2002, 02:44 PM

why not use the onChange event handler instead of onkeyup?

requestcode

10-29-2002, 04:34 PM

The onchange event will only work after you remove focus from the form element. This is what I came up with. The second value is the next box in the forms array to jump to. I had to pass that to the function because I could not figure out a way to determine the next one based on the properties that where available from "this". Hope it helps:
<html>
<head>
<title>Jump to next Text Box</title>
<SCRIPT LANGUAGE="JavaScript">
function nextbox(fldobj,nbox)
{
if(fldobj.value.length>3)
{document.forms[0].elements[nbox].focus()}
}
</SCRIPT>
</head>
<body onLoad="document.myform.txt1.focus()">
<CENTER>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="txt1" SIZE="4" MAXLENGTH="4" onKeyUp="nextbox(this,1)">
<INPUT TYPE="text" NAME="txt2" SIZE="4" MAXLENGTH="4" onKeyUp="nextbox(this,2)">
<INPUT TYPE="text" NAME="txt3" SIZE="4" MAXLENGTH="4">
</FORM>
</body>
</html>

If you have fields of varying lengths then you could also pass the number of characters to check againts also.

reigalz

10-30-2002, 01:57 AM

thanks for all the help...i'll go try it out :thumbsup:

reigalz

10-30-2002, 02:25 AM

hi, i went to try it out but there's a problem...

<script>

function nextbox(fldobj,nbox) {
if(fldobj.value.length>3) {
document.forms[0].elements[nbox].focus()
}
}

</script>

<body>

<form name="carddetails" action="FinalBooking.jsp" method="post">

<table>

<tr>

<td><b>Credit Card No. </b> : </td>

<td>
<input type="text" name="card_no1" maxlength="4" size="4" onKeyUp="nextbox(this,1)"> -
<input type="text" name="card_no2" maxlength="4" size="4" onKeyUp="nextbox(this,2)"> -
<input type="text" name="card_no3" maxlength="4" size="4" onKeyUp="nextbox(this,3)"> -
<input type="text" name="card_no4" maxlength="4" size="4">
</td>

</tr>

</table>

</form>

</body>

when my code is like that, it can work but if i change my code to:

<script>

function nextbox(fldobj,nbox) {
if(fldobj.value.length>3) {
document.forms[0].elements[nbox].focus()
}
}

</script>

<body>

<form name="carddetails" action="FinalBooking.jsp" method="post">

<table>

<tr>
<td><b>Credit Card Type </b> : </td>

<td>
<select name="card_type">
<option></option>
</select>
</td>

</tr>

<tr>

<td><b>Credit Card No. </b> : </td>

<td>
<input type="text" name="card_no1" maxlength="4" size="4" onKeyUp="nextbox(this,1)"> -
<input type="text" name="card_no2" maxlength="4" size="4" onKeyUp="nextbox(this,2)"> -
<input type="text" name="card_no3" maxlength="4" size="4" onKeyUp="nextbox(this,3)"> -
<input type="text" name="card_no4" maxlength="4" size="4">
</td>

</tr>

</table>

</form>

</body>

its doesnt work....why?

joh6nn

10-30-2002, 03:25 AM

i don't see any difference between those two pieces of code. could you highlight the differences, make them easier to see?

reigalz

10-30-2002, 05:20 AM

<tr>
<td><b>Credit Card Type </b> : </td>

<td>
<select name="card_type">
<option></option>
</select>
</td>

</tr>

this is added in the 2nd piece of code. after i have added it, it doesn't work. the cursor does not move automactically to the next box.

glenngv

10-30-2002, 06:08 AM

it is because the parameter nbox is the element position in the page. so since you inserted another field before those fields, it becomes the first element and card_no1 becomes the 2nd element and so on...
pass the the element name instead so that you can place these fields anywhere in the page along with other fields that have no auto-focus.

function nextbox(fldobj,nbox) {
if(fldobj.value.length>3) {
document.forms[0].elements[nbox].focus()
}
}

<input type="text" name="card_no1" maxlength="4" size="4" onKeyUp="nextbox(this,'card_no2')">
<input type="text" name="card_no2" maxlength="4" size="4" onKeyUp="nextbox(this,'card_no3')">
<input type="text" name="card_no3" maxlength="4" size="4" onKeyUp="nextbox(this,'card_no4')">
<input type="text" name="card_no4" maxlength="4" size="4">

reigalz

10-30-2002, 07:14 AM

thanks! can work already... :p

glenngv

10-30-2002, 07:20 AM

actually, you can optimize it further by:

function nextbox(fldobj,nbox) {
if(fldobj.value.length>3) fldobj.form.elements[nbox].focus();
}

this will work even if you have many forms unlike in the old function where it will work only if you have 1 form

capescafe

10-25-2007, 05:51 AM

Hi, I'm doing something in a form nearly identical to this, but instead of the cursor moving after 4 digits typed everytime, I want the cursor to move after typing 2 digits in the first box, then 3 digits in the next box, and the last box also has 3 digits. The format for my number is xx-xxx-xxx.

Do I just need to add another function? Or how would I do that? I'm still pretty new to javascript. Thanks for any help on this.

Philip M

10-25-2007, 07:29 AM

Modifying glenngv's code:-

<SCRIPT type = "text/JavaScript">
function nextbox2(fldobj,nbox) {
if (/\D/.test(fldobj.value)) {
alert ("Only numbers are valid!");
fldobj.value = fldobj.value.slice(0, -1); // remove invalid character
return false;
}
if(fldobj.value.length>1) {
document.forms[0].elements[nbox].focus()
}
}

function nextbox3(fldobj,nbox) {
if (/\D/.test(fldobj.value)) {
alert ("Only numbers are valid!");
fldobj.value = fldobj.value.slice(0, -1); // remove invalid character
return false;
}
if(fldobj.value.length>2) {
document.forms[0].elements[nbox].focus()
}
}
</SCRIPT>

<FORM>
<input type="text" name="card_no1" maxlength="2" size="2" onKeyUp="nextbox2(this,'card_no2')">
<input type="text" name="card_no2" maxlength="3" size="3" onKeyUp="nextbox3(this,'card_no3')">
<input type="text" name="card_no3" maxlength="3" size="3" onKeyUp="nextbox3(this,'card_no3')">
</FORM>

capescafe

10-25-2007, 07:40 AM

Ok will try this. Thanks for the quick reply.

Philip M

10-25-2007, 07:55 AM

Ok will try this. Thanks for the quick reply.

Note the correction above.

glenngv

10-27-2007, 06:57 PM

Use the maxlength property of the field to determine if focus needs to be moved or not.
function nextbox(fldobj, nbox) {
if (fldobj.value.length==fldobj.maxLength) {
fldobj.form.elements[nbox].focus();
}
}
<form>
<input type="text" name="card_no1" maxlength="2" size="2" onkeyup="nextbox(this,'card_no2');" />
<input type="text" name="card_no2" maxlength="3" size="3" onkeyup="nextbox(this,'card_no3');" />
<input type="text" name="card_no3" maxlength="3" size="3" onkeyup="nextbox(this,'card_no3');" />
</form>