<input> Data Entry Question

liunx

Guest
If I use code as seen below, is there a way to key in 7 characters into "field1" then have it auto tab over to "field12".<br />
<br />
I am familiar with Java Script if this is part of the answer.<br />
<br />
<br />
<INPUT size="7" type="text" maxlength="7"name="field1"><br />
<INPUT size="7" type="text" maxlength="7"name="field2"><br />
<br />
Any Help Would be appreciated.<br />
<br />
Thanks <br />
Clyde<!--content-->http://forums.webdeveloper.com/showthread.php?s=&threadid=24665#post128673<!--content-->I do not understand what you are telling me.<!--content-->Originally posted by clyde <br />
I do not understand what you are telling me. If I understood your original question correctly, I've linked to a post in which (I believe) has the code you're looking for.<!--content-->Here is an example of one way you could do it:<br />
<html> <br />
<head> <br />
<title>Jump cursor to next Text Box</title><br />
<STYLE><br />
.divClass {font-size:11pt;font-face:Verdana;position:relative;width:400;height:50;font-weight:bold;visibility:visible;layer-background-color:#DDDDDD;background-color:#DDDDDD;border:1px solid black;padding:0px;}<br />
.lnkClass {font-size:11pt;font-face:Verdana;width:125;position:relative;font-weight:bold;visibility:visible;layer-background-color:#DDDDDD;background-color:#DDDDDD;border:1px solid black;padding:0px;}<br />
</STYLE><br />
<SCRIPT LANGUAGE="JavaScript"><br />
/* ***********************************************************<br />
This script created by Jim Young of ****<br />
<!-- w --><a class="postlink" href="http://www.requestcode.com">www.requestcode.com</a><!-- w -->. This script is free to use. ****<br />
Please leave this credit in. ****<br />
***********************************************************<br />
*/<br />
// Pass to this function the text box properties you are typing in by using the "this" object.<br />
// Also pass the name of the next text element to jump to, the name of the form and the<br />
// maximum number of characters allowed in the text form element. These values are passed so that<br />
// this script can be used with multiple forms and form elements on one page.<br />
function nextbox(fldobj,elmname,frmname,maxchar)<br />
{ <br />
if(fldobj.value.length==maxchar)<br />
{document.forms[frmname].elements[elmname].focus()}<br />
}<br />
</SCRIPT><br />
</head><br />
<body onLoad="document.myform.txt1.focus()"><br />
<CENTER><br />
<DIV CLASS="divClass">Jump cursor to next text form element when maximum number of characters has been reached</DIV><br />
<BR><BR><br />
<FORM NAME="myform"><br />
<INPUT TYPE="text" NAME="txt1" SIZE="4" MAXLENGTH="4" onKeyUp="nextbox(this,'txt2','myform',4)"><br />
<INPUT TYPE="text" NAME="txt2" SIZE="5" MAXLENGTH="5" onKeyUp="nextbox(this,'txt3','myform',5)"><br />
<INPUT TYPE="text" NAME="txt3" SIZE="4" MAXLENGTH="4"><br />
</FORM><br />
</CENTER><br />
</body><br />
</html><!--content-->You could try this... not sure if it'll work, but I'm learning bits and pieces of JS here and there, so I figured I've give this a shot. ;)<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><title>Example</title><br />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" /><br />
<br />
<script type="text/javascript"><br />
function moveCursor(maxchar) {<br />
if(document.forms[0][0].value.length==maxchar) {<br />
document.forms[0][1].focus();<br />
}<br />
}<br />
</script><br />
</head><br />
<body><br />
<br />
<form action="" name="Form"><br />
<input type="text" maxlength="7" size="7" name="field1" onkeyup="moveCursor(7)" /> <br /><br />
<input type="text" maxlength="7" size="7" name="field2" /><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
***EDIT***<br />
There's probably a better way, where you could loop through all the form elements and have the focus drop to the next one if the maximum character length is achieved, so you don't have to write a bazillion functions for each form/element.. Fredmv might have a suggestion on this. ;)<!--content-->Thanks for your help<!--content-->
 
Back
Top