Peter VanRysdam / Digital Marketing / August 28th, 2007

Auto-Tab, My Pinky Thanks You

There’s nothing more deflating than checking out online and seeing a long web form ahead.  My poor little left pinky will be so sore after tabbing through all of those fields (note: if you still use the mouse to click between fields, this post isn’t for you). 

I remember the first time I experienced “Auto Tab.”  That is when the form is smart enough to recognize you’re done with one field and it automatically moves you on to the next.  Ingenious, but also annoying.  See, I think the feature is great.  But the problem is this…sometimes I get in a form filling zone.  I’m tabbing and filling and tabbing away, blazing through the form at record speeds.  Then I hit the phone number, and tab away, working the number pad like a concert pianist works the piano.  What the…how did the last four digits end up in the “mother’s maiden name” field?  Barbara 9657?  That’s just dumb!  Ah, caught by the auto tab paradox once again.

I wish all the sites were the same.  Communism got some things right, for example it could mandate we all use auto tab.  I’d much rather go that way than reverting back to the old way of manually tabbing.  Our kids will be amazed we used to have to tab ourselves!

In an effort to bring auto tab awareness to center stage and support the adoption of this standard, here is some code I came across:

<script>

/*
Auto tabbing script- By JavaScriptKit.com
http://www.javascriptkit.com
This credit MUST stay intact for use
*/

function autotab(original,destination){
if (original.getAttribute&&original.value.length==original.getAttribute(“maxlength”))destination.focus()
}
 
</script>
 
<b>Enter your 10-digit phone number:</b>
<form name=”sampleform”>
<input type=”text” name=”first” size=4 onKeyup=”autotab(this, document.sampleform.second)” maxlength=3> <input type=”text” name=”second” size=4 onKeyup=”autotab(this, document.sampleform.third)” maxlength=3> <input type=”text” name=”third” size=5 maxlength=4>

</form>

Lovely.  As they point out on the site, the important part of the code is:

<input type=”text” name=”first” size=4 onKeyup=”autotab(this, document.sampleform.second)” maxlength=3>

You can see an example of the script in action and get some other great code from the JavaScript Kit site

Now here is my challenge to the developers of the world (as I am not one).  Let’s make the tab key useless all together!  That’s right…no tabbing in forms ever again.  Make a script that recognizes when I type in “St.” or “Ave” and goes on to the next line.  Learn that my name ends with an “m” and move me on to the next line.  You’ll be my personal hero. 🙂