Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
advance mouse cursor to text box
- Thread starter j420exe
- Start date
<form name=form1>
<input type="text" name="one" onKeyDown="moveFocus(this, 'document.form1.two')">
<input type="text" name="two" onKeyDown="moveFocus(this, 'document.form1.three')">
<input type="text" name="three">
. . .
<script>
function moveFocus(current, next)
{
if (current.value.length >= 2)
next.focus();
}
</script>
Place the script to the <head> of your page.
<input type="text" name="one" onKeyDown="moveFocus(this, 'document.form1.two')">
<input type="text" name="two" onKeyDown="moveFocus(this, 'document.form1.three')">
<input type="text" name="three">
. . .
<script>
function moveFocus(current, next)
{
if (current.value.length >= 2)
next.focus();
}
</script>
Place the script to the <head> of your page.
Starway...
Are you sure about this? I've copied the code and tried it in IE5 & NN7. Doesn't work on either one. I saw a script like this way back when and as I recall, you had to put the input fields in a loop of some sort. I really don't remember but it seemed fairly bulky so I ddn't pay muchy attention to it.
Would like to see this work because I could make good use of it!
Thanks... There's always a better way...
Are you sure about this? I've copied the code and tried it in IE5 & NN7. Doesn't work on either one. I saw a script like this way back when and as I recall, you had to put the input fields in a loop of some sort. I really don't remember but it seemed fairly bulky so I ddn't pay muchy attention to it.
Would like to see this work because I could make good use of it!
Thanks... There's always a better way...
Thanks tviman for comments. I didn't try my code yesterday.
(Also I'd appreciate any details rather that just telling "it doesn't work"
Here's what we got: when you pass an object name in function argument, it's considered to be a string, but not an object anymore - and you get a message that focus() method is not applicable to it.
The change is very simple:
function moveFocus(current)
{
if (current.value.length >= 1) //fix here - you could type 3 chars before
document.form1.two.focus(); //fix here - next field name is hardcoded
}
<input type="text" name="two" onKeyDown="moveFocus(this)">
Not so beautiful as before - you need a new function for every form field that automatic focus switch needed, because "next" field name is hard-coded into the function body.
I like the first idea more (just one function for all cases), but this seems to be the most simple solution of the problem.
Of course, in other case if there are many fields that need this action, I'd recommend to think about other solution.
(Also I'd appreciate any details rather that just telling "it doesn't work"
Here's what we got: when you pass an object name in function argument, it's considered to be a string, but not an object anymore - and you get a message that focus() method is not applicable to it.
The change is very simple:
function moveFocus(current)
{
if (current.value.length >= 1) //fix here - you could type 3 chars before
document.form1.two.focus(); //fix here - next field name is hardcoded
}
<input type="text" name="two" onKeyDown="moveFocus(this)">
Not so beautiful as before - you need a new function for every form field that automatic focus switch needed, because "next" field name is hard-coded into the function body.
I like the first idea more (just one function for all cases), but this seems to be the most simple solution of the problem.
Of course, in other case if there are many fields that need this action, I'd recommend to think about other solution.
starway is on the right track:
Try this:
<form name=form1>
<input type="text" id="one" onKeyDown="moveFocus(this, two)">
<input type="text" id="two" onKeyDown="moveFocus(this, three)">
<input type="text" id="three">
. . .
<script>
function moveFocus(current, next)
{
if (current.value.length >= 2)
next.focus();
}
</script>
This way you're actually passing an object to the function, not a string.
Try this:
<form name=form1>
<input type="text" id="one" onKeyDown="moveFocus(this, two)">
<input type="text" id="two" onKeyDown="moveFocus(this, three)">
<input type="text" id="three">
. . .
<script>
function moveFocus(current, next)
{
if (current.value.length >= 2)
next.focus();
}
</script>
This way you're actually passing an object to the function, not a string.
Oh! I should sleep more at night!
Here is it:
function moveFocus(current, next)
{
if (current.value.length >= 1)
eval("document.form1." + next + ".focus()"
}
<input type="text" id="two" onKeyDown="moveFocus(this, 'third')">
This is how it should be, one function for all. And it works.
Here is it:
function moveFocus(current, next)
{
if (current.value.length >= 1)
eval("document.form1." + next + ".focus()"
;}
<input type="text" id="two" onKeyDown="moveFocus(this, 'third')">
This is how it should be, one function for all. And it works.
Thanks to both gdiffor and starway for the clean little function. I switched from the keyDown event to the keyUp event so the cursor advances right after the maximum number of characters for the textbox has been reached. I found that with the keyDown event, it only advanced when the first character for the next textbox was stroked. This was a little confusing for users that actually watched the cursor.
Again, thanks for the tip.
Again, thanks for the tip.
- Thread starter
- #11
- Status
Similar threads
- Locked
- Question