[thelist] fun with form entries

Steve Lewis nepolon at worlddomination.net
Mon Feb 28 22:24:12 CST 2005


I had a bit of fun today with my favorite online bookstore.

I ordered a book about three weeks ago.  The book shipped a bit over 
two weeks ago.  I have not received it yet.  Today I took the time to 
start sleuthing a bit, and I discovered that the book is being 
returned to the shipper, having been flagged as undeliverable.

It turns out that the Suite number for the address at work never made 
it into the mailing address in the bookstore's database.  A little 
more sleuthing, and I discover that the address entry form has a max 
limit on the field which is shorter than the address I was shipping 
to, and which is shorter than any other address fields I have seen.

A phone call gets me in touch with the web master and I suggest having 
the field auto-advance to the second address line when the first line 
is full.  He likes the idea and told me to feel free to offer him an 
example of what I am thinking.

Here is what I sent him.

<tip author="Steve Lewis" subject="smart line wrapping to advance 
through address fields in forms">

An example script to intelligently advance through input fields.

// wrapTextInput
//
// When the content of the supplied DOM Element (a text input field or
// textarea) reaches the Element's maximum length, this method will
// attempt to auto-advance the browser focus to the next field in the
// form.  In doing so, it will attempt to wrap the current 'word' to
// the next line as a convenience.  If the current Element only has
// one 'word' or the 'word' is too long for the next field, the
// attempt to wrap down is aborted.
//
// USAGE NOTES:
//   Elements which should wrap to their next sibling should call this
// method in the onkeyup event, and should pass / this / as the
// parameter.
//   The wrapping Element and it's next sibling should both specify a
// tabindex attribute, also.
//
function wrapTextInput(elmnt)
{
   // when we reach the length limit
   content = elmnt.value;
   if (content.length==elmnt.maxLength)
   {
     nextIndex=elmnt.tabIndex; // element index of next field
     // make sure that there is a next field
     if (nextIndex < document.forms[0].elements.length)
     {
       nextElmnt = document.forms[0].elements[nextIndex];
       // index to cut current word at
       cutIndex = content.lastIndexOf(' ') + 1;
       currentWord = content.substr(cutIndex,
           content.length - cutIndex);
       // attempt to wrap the current word down
       if (cutIndex > 0 && extElmnt.maxLength > currentWord.length)
       {
         // remove current word from this field
         elmnt.value = content.substr(0, cutIndex);
         // and add the word below
         nextElmnt.value = currentWord;
       }
       // advance to the next field
       document.forms[0].elements[nextIndex].focus();
     }
   }
}

HTML usage might look a little like this:
<input type="text" name="address1" id="address1" tabindex="1" 
size="8" maxlength="6" onkeyup="wrapTextInput(this)">

<input type="text" name="address2" id="address2" tabindex="2" 
size="8" maxlength="6">

</tip>
-- 
Steve Lewis


More information about the thelist mailing list