Pet peeve: Login forms that move the cursor to the username field AFTER the page finishes loading. Sometimes I’m already typing by then.

While working on a website for work, I inadvertently discovered why a web application I use frequently has the annoying habit of moving the cursor to the username field when I’m halfway through typing the password.

The basic way to set initial focus on a form field is to use JavaScript like this:

document.loginForm.usernameField.focus();

You can either embed it in the HTML after the form, or call it in the page’s onload() function. The problem with using onload is that it fires when everything is loaded, which means it waits for images, plugins, and so on. That’s very useful for some tasks, but isn’t the best choice here.

I’m impatient, especially with login forms. I don’t need the logos and background, I want to type in my username and password as quickly as possible and start using the app. Since this particular site isn’t exactly the fastest around, invariably the images don’t finish loading until I’ve started typing the password — and suddenly I’m typing the second half of the password in the username box.

Needless to say, I’m using the inline method on the site I’m building. Not that the login page has any images right now, but if I add any later on, it’ll save the users some aggravation.

Note: I’ve attached a 2009 tweet and the subsequent LiveJournal discussion to the original 2005 article.