Introduction:
I
will explain how to use JavaScript to automatically move cursor to next field when
cursor textbox full or JavaScript to automatically (Auto Tab) send the user from one field
(textbox) to the next when the maxlength of the field has been reached.
Description:
In previous articles I explained jQuery Change background color of div, jQuery fadein fadeout effect, jQuery get current page url and title, jQuery create rounded corners for textbox and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how automatically (Auto Tab) send the user from one field (textbox) to the next when the maxlength of the field has been reached.
In previous articles I explained jQuery Change background color of div, jQuery fadein fadeout effect, jQuery get current page url and title, jQuery create rounded corners for textbox and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how automatically (Auto Tab) send the user from one field (textbox) to the next when the maxlength of the field has been reached.
To
implement this we need to write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript
to automatically move from one field to another field</title>
<script type="text/javascript">
function movetoNext(current, nextFieldID) {
if (current.value.length >= current.maxLength) {
document.getElementById(nextFieldID).focus();
}
}
</script>
</head>
<body>
<b>Enter
your Text:</b>
<input type="text"
id="first"
size="4"
onkeyup="movetoNext(this,
'second')" maxlength="3" />
<input type="text"
id="second"
size="4"
onkeyup="movetoNext(this,
'third')" maxlength="3" />
<input type="text"
id="third"
size="5"
maxlength="4"
/>
</body>
</html>
|
Live
Demo
For
live demo check below example
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
16 comments :
Simple...;-)
Sir How to achieve this for server controls?
superb
is it possible with Dropdownlist ?????
Hi suresh nice article
i want another one with same this fuctions
i mean if i enter it automatically move to next box same like if clear from last texbox it move previous textbox and keep on... to first textbox.
may be it start form center text
How would you trap the RETURN key and jump to the next textbox? (But NOT submit the form's data to the server.)
nice but shitf+tab not working.......
YES,,CORRECT --shift+Tab == not working
nice
Good One Buddy
Hi Suresh,
This was a good article,
but if I want to edit the values in the text box then I have select each text box and need to change. Its not updating as freely as we enter the data. Can you please post the code for editing also.
Nice article but on windows 7 or higher version browsers not working, pls give solution to this problem.
is it possible with asp server controls????
Thanks suresh ji
this code is not working for deleting
what if i want to delete the input hitting back space, how would i go back to the previous input field without manually clicking on previous input?
Note: Only a member of this blog may post a comment.