Auto Tabs In Javascript

Auto Tabs In Javascript

Page 1 of 1

2 Replies - 3018 Views - Last Post: 20 December 2009 - 02:38 AM

#1 hempushap  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 17-December 09

Auto Tabs In Javascript

Post icon  Posted 17 December 2009 - 04:12 AM

I m writing a code for auto tabs in a html page.
Below is the code for that
<html>
<header>
<script language="Javascript">

function autotab(original,destination,e)
{


if(original.value.length==original.getAttribute("maxlength"))
destination.focus();

}
</script>
</header>
<body>
<form name="form1">
MM<Input Type="textbox" maxlength="2" name="mm" onkeypress="autotab(this,document.form1.dd,event)" >
DD<Input Type="textbox" maxlength="2" name="dd" onkeypress="autotab(this,document.form1.yyyy,event)" >
YYYY<Input Type="textbox" maxlength="4" name="yyyy">
</form>
</body>
</html>

This codes works well if the input fields are empty but when they are filled the auto tab functionaly becomes highly over sensitive i.e. on a key press the focus moves to some other field.
Please suggest a solution to this.

Is This A Good Question/Topic? 0
  • +

Replies To: Auto Tabs In Javascript

#2 hempushap  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 17-December 09

Re: Auto Tabs In Javascript

Posted 17 December 2009 - 04:29 AM

View Posthempushap, on 17 Dec, 2009 - 03:12 AM, said:

I m writing a code for auto tabs in a html page.
Below is the code for that
<html>
<header>
<script language="Javascript">

function autotab(original,destination,e)
{


if(original.value.length==original.getAttribute("maxlength"))
destination.focus();

}
</script>
</header>
<body>
<form name="form1">
MM<Input Type="textbox" maxlength="2" name="mm" onkeypress="autotab(this,document.form1.dd,event)" >
DD<Input Type="textbox" maxlength="2" name="dd" onkeypress="autotab(this,document.form1.yyyy,event)" >
YYYY<Input Type="textbox" maxlength="4" name="yyyy">
</form>
</body>
</html>

This codes works well if the input fields are empty but when they are filled the auto tab functionaly becomes highly over sensitive i.e. on a key press the focus moves to some other field.
Please suggest a solution to this.



Any replies to my question?


View Posthempushap, on 17 Dec, 2009 - 03:26 AM, said:

View Posthempushap, on 17 Dec, 2009 - 03:12 AM, said:

I m writing a code for auto tabs in a html page.
Below is the code for that
<html>
<header>
<script language="Javascript">

function autotab(original,destination,e)
{


if(original.value.length==original.getAttribute("maxlength"))
destination.focus();

}
</script>
</header>
<body>
<form name="form1">
MM<Input Type="textbox" maxlength="2" name="mm" onkeypress="autotab(this,document.form1.dd,event)" >
DD<Input Type="textbox" maxlength="2" name="dd" onkeypress="autotab(this,document.form1.yyyy,event)" >
YYYY<Input Type="textbox" maxlength="4" name="yyyy">
</form>
</body>
</html>

This codes works well if the input fields are empty but when they are filled the auto tab functionaly becomes highly over sensitive i.e. on a key press the focus moves to some other field.
Please suggest a solution to this.



Can Anyone reply to my question please.

View Posthempushap, on 17 Dec, 2009 - 03:28 AM, said:

View Posthempushap, on 17 Dec, 2009 - 03:12 AM, said:

I m writing a code for auto tabs in a html page.
Below is the code for that
<html>
<header>
<script language="Javascript">

function autotab(original,destination,e)
{


if(original.value.length==original.getAttribute("maxlength"))
destination.focus();

}
</script>
</header>
<body>
<form name="form1">
MM<Input Type="textbox" maxlength="2" name="mm" onkeypress="autotab(this,document.form1.dd,event)" >
DD<Input Type="textbox" maxlength="2" name="dd" onkeypress="autotab(this,document.form1.yyyy,event)" >
YYYY<Input Type="textbox" maxlength="4" name="yyyy">
</form>
</body>
</html>

This codes works well if the input fields are empty but when they are filled the auto tab functionaly becomes highly over sensitive i.e. on a key press the focus moves to some other field.
Please suggest a solution to this.



Any replies to my question?


View Posthempushap, on 17 Dec, 2009 - 03:26 AM, said:

View Posthempushap, on 17 Dec, 2009 - 03:12 AM, said:

I m writing a code for auto tabs in a html page.
Below is the code for that
<html>
<header>
<script language="Javascript">

function autotab(original,destination,e)
{


if(original.value.length==original.getAttribute("maxlength"))
destination.focus();

}
</script>
</header>
<body>
<form name="form1">
MM<Input Type="textbox" maxlength="2" name="mm" onkeypress="autotab(this,document.form1.dd,event)" >
DD<Input Type="textbox" maxlength="2" name="dd" onkeypress="autotab(this,document.form1.yyyy,event)" >
YYYY<Input Type="textbox" maxlength="4" name="yyyy">
</form>
</body>
</html>

This codes works well if the input fields are empty but when they are filled the auto tab functionaly becomes highly over sensitive i.e. on a key press the focus moves to some other field.
Please suggest a solution to this.

Was This Post Helpful? 0
  • +
  • -

#3 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Auto Tabs In Javascript

Posted 20 December 2009 - 02:38 AM

Try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
<title></title>
</head>
<body>
	<input type = "text" name = "first" size = 4
		onchange = "autoTab( month, days )" maxlength = 2 id = "month" onkeyup = "countLetters( 'month' )">
	<input type = "text" name = "days" size = 4
		onchange = "autoTab( days, years )" maxlength = 2 id = "days" onkeyup = "countLetters( 'days' )">
	<input type = "text" name = "days" size = 4 maxlength = 4 id = "years">
<script type = "text/javascript">
function countLetters( datechange ) {
		var leng = document.getElementById( "month" );
		var lengthOf1 = leng.value.length;
		var leng = document.getElementById( "days" );
		var lengthOf2 = leng.value.length;
	if( lengthOf1 === 2 && datechange === "month" )
		document.getElementById( "days" ).focus();
	else if( lengthOf2 === 2 && datechange === "days" ){
		document.getElementById( "years" ).focus();
	}
}
</script>
</body>
</html>


Month and days will probably have to have a 0 in front of single digit values.
There is probably an easier way, but this will have to do for now.

This post has been edited by hiddenghost: 20 December 2009 - 02:44 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1