Forum Moderators: open
When I develop form pages it has always been a good thing to select form elements, or at least I thought. Every web programmer I code with thinks a focus on the first element helps usability. I am starting to disagree with that.
One site I go to frequently has a login on their homepage. I do login, but the problem is I am on the password field when the page finish loading and half of my password is in the username field. This is always irritating so I wait for the page to completely load. This couple of seconds on DSL really makes me angry, but if I start too quickly I lose more than a few seconds.
So what do others think? I am done adding form focus onLoad. I will only use that during validation. I really have to thank Yahoo for forcing me to see the annoyance.
I believe simply in giving the user full control over my pages... be it using relative widths, to not using onLoad field focuses.
It can be hard to resist the temptation of using every DOM manipulation under the sun, and spoon feeding the user completely. I feel that this can be stifling for them - lots of control and lots of whitespace!
To get around the annoyance of having a field focused when you're halfway through loging in, I avoided the onLoad event. Instead, I used a <script> section right after the form, so that it gets run as soon as the document elements it referrs to have been created, rather than waiting for the whole page to load. It seems to work. I also test to see if the username field has a value, and if it does I focus password instead.
Is there a way to get the default value of a field in javascript rather than the current one? If so, I could make that script even less likely to be annoying.
Focussing makes it impossible to scroll down using the keyboard arrows, which is very annoying whenever receiving data is not the primary purpose of the page. For example some company's home page: it's very nice if there is a site search option, but please don't focus and let me scroll...
<script type="text/javascript">
if (document.forms.loginform.username.value == '')
{
document.forms.loginform.username.focus();
}
else if (document.forms.loginform.username.value ==
document.forms.loginform.username.defaultValue)
{
document.forms.loginform.password.focus();
}
</script>
This should focus the username field if it is empty, and the password field if the username is filled in, but still the default value, and otherwise do nothing. I've only tested it in Gecko so far, 'cause that's what I have handy. I'll try it in a few others when I get home this evening.
The idea is that the form in question may be generated with or without the username field pre-filled, depending on whether I have a good guess about who is trying to log in. (Usually from a GET variable.) If the username field is empty, then that's where we want to start, since there's nothing else on the page, not even a link. If the username field is not empty, that could either be the result of user input or a default value in the form. If it's a default value in the form, then along with guessing that we know who is about to log in, we want to put the cursor in the password field instead of the username field. (Focusing the password field when the user is already typing there should be harmless, right? The page loads too fast for me to test this theory, but if not then there should also be a test to see if the password field has been changed.) If the username has been changed in any way from what we initially sent, though, we don't want to steal the cursor from wherever the user is typing now, so we do nothing.
<edit>fixed side scroll, corrected two mis-statements.</edit>
[edited by: dingman at 5:20 pm (utc) on June 23, 2003]