I remember back in 1999 when it was a really cool trick to automatically put focus into the first form field when the page finished loading.  That used to be an impressive bit of JavaScript.  But anymore, I am flabbergasted at how many sites implement this incorrectly.  I am tired of getting frustrated by the following series of events:

  1. Open a new browser window and navigate to your bank’s website, say for instance, www.citicards.com
  2. As soon as the login form appears, you click your mouse into the username box and enter your username
  3. You hit tab, shudder at the fact that you have to hit tab again to get to the password box, but nonetheless, you hit tab again to put focus into the password box
  4. You type your cryptic, ultra-secure password that you never want anyone to see, maybe glancing down at the keyboard while you type it because it’s so hard to type the thing
  5. You look back at the screen before hitting enter, and you see the screen shot below

image

For this demonstration, I put in my User ID as “username” then hit tab twice and entered my password of “super secret.”  As you can see, my super secret password isn’t much of a secret anymore.

How did this happen?

In between hitting tab for the 2nd time and beginning to enter my password, the page finished loading.  Upon load completion, a JavaScript method ran to force focus into the User ID textbox, without checking a precondition to see if I had already manually moved focus into the field myself and begun entering my credentials.

I see this crap all the time.  I’m tired of it.  If you’re the owner of a login form, or for that matter, any other form that automatically sets focus, please do some checks to make sure you’re not pissing your users off when you’re in fact trying to help them.