Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JavaScript Automatically Move Cursor to Next Field When Textbox Full

Feb 28, 2013
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.

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

Enter your Text:

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 RSS subscribe by email Subscribe by Email

16 comments :

Anonymous said...

Simple...;-)

Nanda Kishor G N said...

Sir How to achieve this for server controls?

Anonymous said...

superb

shawn said...

is it possible with Dropdownlist ?????

Unknown said...

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

Anonymous said...

How would you trap the RETURN key and jump to the next textbox? (But NOT submit the form's data to the server.)

Anonymous said...

nice but shitf+tab not working.......

sakthi said...

YES,,CORRECT --shift+Tab == not working

Unknown said...

nice

Anonymous said...

Good One Buddy

Unknown said...

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.

SRINIVASA PRABHU said...

Nice article but on windows 7 or higher version browsers not working, pls give solution to this problem.

Anonymous said...

is it possible with asp server controls????

Unknown said...

Thanks suresh ji

Anonymous said...

this code is not working for deleting

Unknown said...

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?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.