form functionality 1

DANZIG · Jul 14, 2004

Hellos,

I'm trying to set up an ip input field in a from and am close but not so close to how I want it to behave. What I'm trying to do is:

1. separate the ip segments in to fields.

2. auto focus between the fields based on the max length (3) of the current field.

3. if a person uses "." IE "10." strip the "." out of the current field and set focus to the next segment field.

4. If a user presses [backspace] or [delete] allow the focus to shift between the fields as needed.

I'm fairly sure that this isn't too hard and somebody probably has something just like this already. I've been trying to write this myself but am still learning so it's a very slow process.

Here is what I have so far.

Code:

<html>
<head>
</head>
<body>
<script>
function autotab(original,destination){
    
    if (original.getAttribute&&original.value.length==original.getAttribute("maxlength"))
  destination.focus();
  
 if (document.original = window.event){
     if (original.keyCode == "190"||"110"){destination.focus();} }
}
</script>
<form name="ipform">
<input type="text" name="seg1" size="3" 
 style="font-family: Arial; font-size: 8pt; color: #333366; position: relative; width: 30"
  onKeyup="autotab(this, document.ipform.seg2)" maxlength="3">.
<input type="text" name="seg2" size="3" 
 style="font-family: Arial; font-size: 8pt; color: #333366; position: relative; width: 30"
  onKeyup="autotab(this, document.ipform.seg3)" maxlength="3">.
<input type="text" name="seg3" size="3" 
 style="font-family: Arial; font-size: 8pt; color: #333366; position: relative; width: 30"
  onKeyup="autotab(this, document.ipform.seg4)" maxlength="3">.
<input type="text" name="seg4" size="3" 
 style="font-family: Arial; font-size: 8pt; color: #333366; position: relative; width: 30"
  maxlength="3">
</form>   

</body>

</html>

I learn mostly by example so if ya have a code snipit that would be great.

Thanks in advance, Danzig

LFI · Jul 14, 2004

This seems like it will get you most of the way.

Note the following:

* I moved the JavaScript into the HEAD tags although it was working the way you had it.

* The JavaScript and HTML was not liking "maxlength", but it works with "mxlength" (without the 'a'... or any other variation that wasn't "maxlength"), so I made that change.

* In order to tab back, I send a third parameter to the autotab function.

Code:

<html>
<head>
<script>
function autotab(original,destination,previous)
{
 var curr = original.value;
 [b]//add check to make sure user enters a number[/b]
 if(isNaN(curr))
 {
  alert("You may only enter numbers.");
  original.value = '';
  return;
 }//end if

 [b]//make sure length doesn't get over mxlength (possible for last ip-textbox and also possible if user mouse-clicks in an already full ip-textbox[/b]
 if(original.value.length > original.mxlength)
 {
  original.value = original.value.substring(0, original.mxlength); [b]//resets back to mxlength[/b]
  alert("You may not enter more than "+original.mxlength+" numbers in that field.");
  destination.focus(); [b]//since box is full, focus moves[/b]
  return;
 }//end if

 var kC = event.keyCode;
 if(kC == 8 || kC == 46) [b]//backspace or delete, respectively[/b]
 {
  if(original.value == '')
   previous.focus(); [b]//notice that cursor goes to previous ip-box, but is at beginning of value in that box.  Ergo, doesn't allow repetitive backspace hits to delete whole number.  Possible solution to change this line to [i]previous.select()[/i][/b]
 }//end if
 else if(kC == 190 || kC == 110) [b]//checks for dots[/b]
 {
  [b]//erases dot[/b]
  original.value = original.value.replace(/./g,'');

  [b]//moves focus[/b]
  destination.focus();
 }//end if
 else if((kC >= 48 && kC <= 57) || (kC >= 96 && kC <= 105)) [b]//only responds if key was a number[/b]
 {
  if (original.value.length == original.mxlength) [b]//checks for maximum length[/b]
   destination.focus(); [b]//moves focus[/b]
 }//end else if
}
</script>
</head>
<body>
<form name="ipform">
<input type="text" name="seg1" size="3" 
 style="font-family: Arial; font-size: 8pt; color: #333366; position: relative; width: 30"
  mxlength='3' onKeyup="autotab(this, document.ipform.seg2, this)">.
<input type="text" name="seg2" size="3" 
 style="font-family: Arial; font-size: 8pt; color: #333366; position: relative; width: 30"
  onKeyup="autotab(this, document.ipform.seg3, document.ipform.seg1)" mxlength="3">.
<input type="text" name="seg3" size="3" 
 style="font-family: Arial; font-size: 8pt; color: #333366; position: relative; width: 30"
  onKeyup="autotab(this, document.ipform.seg4, document.ipform.seg2)" mxlength="3">.
<input type="text" name="seg4" size="3" 
 style="font-family: Arial; font-size: 8pt; color: #333366; position: relative; width: 30"
  onKeyup="autotab(this, this, document.ipform.seg3)" mxlength="3">
</form>   

</body>

</html>

Try that out. Let us know if that covers it for you.

--Dave

DANZIG · Jul 14, 2004

Thanks very much for the great example Dave.

I script mostly in vbs at the moment, was perl prior but never in cgi or web fashion. The javascript reminds me of perl quite a bit with a lot of hooks built in. This should help alot to learn from.

Thanks, Danzig

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

form functionality 1

DANZIG

Technical User

LFI

Programmer

DANZIG

Technical User

Similar threads

Part and Inventory Search

Sponsor