JavaScript For Automatically moving Between Textboxes

**mrhoo** · Apr 2 '07, 03:59 PM

Why limit yourself to 5?
This script will advance the focus from any input with a maxLength property when the number of digits or characters equals the maxlength.

Code:

<html>
<head>
<title>Moving Focus</title>
 
<script type="text/javascript">
 
function after5(e){
	var who= e? e.target: event.srcElement;	
	if(who.value.length< who.maxLength) return true;	
	var group= who.form.elements;
 
	var L= group.length-1, tem;
	for(var i=0; i<L; i++){
		tem= group[i];
		if(tem==who && group[i+1]) return group[++i].focus();
	}
}
onload= function(){
	var A=document.getElementsByTagName('input');
	var L= A.length;	
	for(var i=0; i< L; i++){
		var tem=A[i];
		if(tem.maxLength)tem.onkeyup= after5;	
	}
	A[0].focus();
}
</script>
</head>
<body> 
<h1>Moving focus</h1>
<form action='' onsubmit="return false;">
<p><label>First box: 5 characters <input name="in_1" type="text" size="5" maxLength="5" value=""></label></p>
<p><label>Second box: 5 characters <input name="in_2" type="text" size="5" maxLength="5" value=""></label></p>
<p><label>Third box: 3 characters <input name="in_3" type="text" size="3" maxLength="3" value=""></label></p>
<p><label>Fourth box: 7 characters <input name="in_4" type="text" size="7" maxLength="7" value=""></label></p>
<p><label>Fifth box: 5 characters <input name="in_5" type="text" size="5" maxLength="5" value=""></label></p>
<p><input type="button" value="Submit"></p>
</form>
</body>
</html>

**Frinavale** · Apr 2 '07, 07:05 PM

Originally posted by mrhoo

Why limit yourself to 5?
This script will advance the focus from any input with a maxLength property when the number of digits or characters equals the maxlength.
...

Mr. Hoo you are Awesomel!

Thank you so much!
I never even thought about using the max length.
I ended up finally getting the focus() to change to the next textbox (had a case sensitive issue with my getElementByID( ) )...

But then ran into a few problems for when the user's input was something like backspace...and even had to write code to check how many characters were in the fields if the focus had changed.

The max length check gets rid of both these problems completely!
This is such a complete solution to my problem.
I hope you don't mind me using it as is.

Thanks again!
:)
-Frinny

JavaScript For Automatically moving Between Textboxes

JavaScript For Automatically moving Between Textboxes

Comment

Comment