Entry

How do I auto tab in a table (IE only).

Sep 18th, 2002 14:18
Brian Tice,

In order to auto tab in a table within I.E. and also maintain insert 
ability, I have found the following works well.  This method is more 
involved then other methods I have seen on other web sites, but my need 
was much more precise.  I found that the typical auto tab method 
inadvertently disables the ability to overwrite characters.  My method 
accounts for this, thus only turning auto tab on when the very last 
position of a field has been filled.

I hope this helps others that have had the same predicament.

First, add the onkeydown and onkeyup event handlers to each input table 
cell as shown below, becuase both need to run back to back.

onkeydown=efdata_onkeydown_func(this); onkeyup=efdata_onkeyup_func(this)

Now add the onkeydown and onkeyup functions.  I put comments throughout 
both functions describing what is taking place.  Be sure to change 
variable names, etc. as needed.

<Script>
function efdata_onkeydown_func(fn)
{
//This function in conjunction with the efdata_onkeyup_func() function, 
makes the cursor
//automatically tab to the next field once the field has been filled.

idx = -1;

//maximum length of the field
max = fn.maxLength;

//number elements in the form
numelem = document.form1.length;

//variable "i" is the element to start checking at.  I chose to start
//at element 23
for (i = 23; i < document.form1.length; i++)
  {
    if (document.form1.elements[i].id == fn.id)
      {
         //Save the before modify values needed for the onkeyup 
function.
         idx = i;
         fnvalue = fn.value;
         fnvaluelength = fn.value.length;
         return;
      }
  }

}

function efdata_onkeyup_func(fn2)
{
//Value of the element passed to the function
fv = fn2.value;

//maximum length of the field
max = fn2.maxLength;

//If the length of the new value is equal to the length of the field, 
check
//to see if the autotab should be turned on.
if (fv.length == max)
  {
     //If the length of the old value is the same as the length of the 
new value,
     //do not turn autotabbing on.
     if (fnvaluelength == fv.length)
       {
         return;
       }

     //Array to hold the characters of the old value.
     fnarray=new Array(max);

     //Array to hold the characters of the new value.
     fvarray=new Array(max);

     //Initialize the arrays to nulls.
     for (arrayi=0; arrayi <= max; arrayi++)
       {
          fnarray[arrayi]=null;
          fvarray[arrayi]=null;
       }

     //Add the characters of the old value to the fnarray.
     for (arrayi=0; arrayi < fnvaluelength; arrayi++)
       {
          fnarray[arrayi]=fnvalue.substr(arrayi,1);
       }

     //Add the characters of the new value to the fvarray.
     for (arrayi=0; arrayi < fv.length; arrayi++)
       {
          fvarray[arrayi]=fv.substr(arrayi,1);
       }

//Loop through both arrays to find where different character is.  If 
the only differnce is
//between the last elements of both arrays and the element for the 
fnarray is null,
//turn autotab on, else do not turn on.
     for (arrayi=0; fnarray[arrayi] == fvarray[arrayi]; arrayi++);

     if (arrayi == (max - 1) && fnarray[max - 1] == null && fvarray
[max - 1] != null)
       {
          //idx was populated in the onkeydown function.  It holds the 
current element index of the field.
          //To find the next field to autotab to, add to "idx" the 
number of elements away the next 
          //field to tab to is at.  I chose 3.
          next = idx + 3;

          //Do not turn autotabbing on if this efdata field is in the 
last row of the table.
          if (next >= document.form1.length)
            {
              return;
            }

          //Put the focus in the next field.
          document.form1.elements[next].focus();
       }

  }
}
</SCRIPT>