FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

javascript: jump field after max length

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


badai
let say i have 3 text field

Code:

<input type='text' size='3' maxlength='3' name='a'>
<input type='text' size='4' maxlength='4' name='b'>
<input type='text' size='5' maxlength='5' name='c'>


what i need is, after user key in 3 chars in a, it will automatically jump to b, after user put 4 chars in b, cursor will jump to c.

possible to do with javascript? any reference?

also, if cursor in c, and user delete using backspace key, possible to jump back to b.... and a after b? just like when u enter serial number for your adobe product. Smile
trefen
Try this! Smile There is one bug. If you trie to erase one and one letter it jumps forward in firefox. Sad Works perfect in IE Cool

Here is the tree boxes (in a form and with functions):

Code:
<form name="form1">
<input type='text' value="" size='3' maxlength='3' name='a' onkeyup=CheckLength('a','b') onfocus=this.select()>
<input type='text' value="" size='4' maxlength='4' name='b' onkeyup=CheckLength('b','c') onfocus=this.select()>
<input type='text' value="" size='5' maxlength='5' name='c' onfocus=this.select()>
</form>


Here is some javascript. Place it were you like!

Code:
<script>
function CheckLength(ThisName,NextName){
temp=-1
if(navigator.userAgent.indexOf("Internet Explorer",-1) == -1){temp=0}
if(eval('form1.'+ThisName+'.value.length == form1.'+ThisName+'.maxLength+temp')){
eval('form1.'+NextName+'.focus()')
}
}
</script>


Sorry all the wired code... Razz Not to god at getElementbyID and such!
Stubru Freak
trefen wrote:
Try this! Smile There is one bug. If you trie to erase one and one letter it jumps forward in firefox. Sad Works perfect in IE Cool

Here is the tree boxes (in a form and with functions):

Code:
<form name="form1">
<input type='text' value="" size='3' maxlength='3' name='a' onkeyup=CheckLength('a','b') onfocus=this.select()>
<input type='text' value="" size='4' maxlength='4' name='b' onkeyup=CheckLength('b','c') onfocus=this.select()>
<input type='text' value="" size='5' maxlength='5' name='c' onfocus=this.select()>
</form>


Here is some javascript. Place it were you like!

Code:
<script>
function CheckLength(ThisName,NextName){
temp=-1
if(navigator.userAgent.indexOf("Internet Explorer",-1) == -1){temp=0}
if(eval('form1.'+ThisName+'.value.length == form1.'+ThisName+'.maxLength+temp')){
eval('form1.'+NextName+'.focus()')
}
}
</script>


Sorry all the wired code... Razz Not to god at getElementbyID and such!


That's really ugly code. Try replacing it with this, much more beautiful:

Code:
<script>
function CheckLength(ThisName, NextName){
var temp = -1;
if(navigator.userAgent.indexOf("Internet Explorer",-1) == -1){temp = 0;}
if(form1[ThisName].value.length == form1[ThisName].maxLength + temp){
form1[NextName].focus();
}
}
</script>


object['attribute'] means the same as object.attribute.
trefen
Know its really ugly... Sad Thanks for the tips Wink
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.