[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