I hate filling out login forms to discover that half of my password is in the username box. Lets talk about why – and then a solution.
Why?
Slow Loading Pages
Slow loading pages, or sites with a lot of content on the login page (see: a no-no for login pages), take a while to finish loading the content. The ‘onload’ handler is usually the whole on-load and not just the domloaded event. Tons of extra content delay the onload handler.
Dialup
Yes, people still have this. Even with the smallest amount of extra content, dialup users will experience some delay.
So what is happening?
People who jump the gun – like me (and 93% of everyone else) are clicking in the username box, filling it in, and then tabbing to the password box. While typing in the password, the page finally finishes loading, and focuses the username. We don’t notice, so we keep typing.
What is the solution
Quickly: activeElement
Firefox 3, and IE4+ support activeElement. (there are other ways around this for other browsers – see the end of this article). Check to see if the body is the active element – before focusing the username. If it is, means that they haven’t started typing anywhere.
Give me an example?
Ok! You should use a better ‘onload’ handler – but I’m being lazy just for this example.
1 2 3 4 5 6 | function loginFormInit() { if (document.activeElement == document.body) { document.getElementById('username').focus(); } } |
1 2 3 4 5 6 7 8 | <body onload="loginFormInit()"> <h1>Login</h1> <form> username: <input type="text" id="username" name="username" /><br /> password: <input type="password" id="password" name="password" /><br /> <input type="submit" /> </form> </body> |
Oh Noes! I need to support more than IE4 and FF3
No worries, citizen! If you need to support something else, besides those two lovely browsers, you could write a function to getElementsByTagName(‘input’) and add an onfocus element. That element could set a global variable to ‘true’. Finally, your onload function could check to make sure that that variable is not true – and then do the focus.
Nice! Now if we could get some of the “big sites” to actually do this that would be nice. (MSN, I’m looking at you.) I keep an old hotmail account as a spam dump and check in on it occasionally. Even with DSL I encounter this very thing most every time I log in to it. Not good.
The rather hackish I way I made this work at my last job for FF1+, IE3+, Netscape 4+, (etc, etc ad nauseum) was to check the value if the username field. If it was blank focus there, otherwise don’t do anything, the user is already busy with it.
Very nice, indeed. Hadn’t really thought of this before, but it makes total sense.
Another good example somewhat related to this would be: http://www.google.com/firefox?client=firefox-a&rls=org.mozilla:en-US:official
This is the default homepage for firefox. If you are typing in the address bar or quicksearch before the page completely loads it will bring focus to the page’s search input field. Boo.