Clever Web Forms
When Simon Willison writes an article called Simple Tricks for More Usable Forms you know it's going to be worth the read.
I have to pick fault with his first suggestion though - that you should place cursor focus on a certain field when the page loads. The idea is simple. You have an onload event in the page's body element:
<body onload="document.getElementById('myfield').focus()">
When used properly, like Simon's example of Google, it's a nice little trick. However, it I find it gets used in the wrong places all too often. Mainly login screens. Take X Drive for example. When the page loads it places cursor focus on the username box. The problem is that the onload event doesn't trigger until the whole page has loaded, graphics and all. What I normally find happens is that the page displays and I start typing my username and password in to the fields, while the browser continues fetching the images. By the time you're about half way through the password the onload event triggers and you're transported to the username field. If you're like me, you're probably looking at the keyboard as this happens and so you continue typing your password into the username box, for the whole world to see. At the very least it's an annoyance. At its worst it's a security issue.
You can see in the screen-grab above that I've got as far as "pas" in my (fictional) password, "password", when the cursor moved and I carried on typing.
What I'm trying to say is use tricks like this carefully and think about the consequences. Too much JavaScript cleverness can be a very bad thing!
I totally agree. It is a pain to look back up at a screen and see half your password in plain view.
One trick I've used in the past is to use an if statement in the onload event.
If(document.getElementById('myfield').value==""){document.getElementById('myfield').focus()}
So if the field is blank then move the cursor there, if it's not blank then assume that the user has already started typing and don't do anything.
Nice solution Declan. I'd been trying to think of a workaround but this one's so pure and simple that I missed it ;o)
Sometimes the simple ideas are the best...
... and the hardest to find ...
Another workaround might be "<SCRIPT>document.getElementById('myfield').focus()</SCRIPT>" immediately after the field, then it focuses right after the field has loaded - so the field exists, and you can begin typing.
Hi Jake,
I have read you blog for years ( about 2-3 now). This is the first time I comment though. Thanks for the knowledge and entertainment!
I have used a different technique that keeps everything hidden from the user until the page loads. I have only used it in a clients Intranet application.
<script for=window event=onload language="javascript">
init();
</script>
init() is a function that unhides any div or span tags.
See you at Lotusphere!
Cheers,
Angel
Ft. Lauderdale, FL, USA
Username = swordjake
SWORD!!!! Oh my God, so you feel like Highlander? :oP
.::AleX::.
Dominocode.Net
Jake:
I use the same trick as Gareth. As soon as I load the field, I place some JS coding to place the focus in that field.
I've also used a what Angel suggested to display splash screens.
Create one large div with the content aligned in the centre horiz and vert.
Then hide it onload.
Also a good tip for IE, if you ever want to stop a user from doing anything, create a layer which dynamically sizes to the whole visible area, and set it's transparency to 0%, they can see everything but can't click it. We use it to trap clicks outside a popup menu area. It's only IE though - so know your audience
How about an alert when a user has his Caps Lock turned on? Saved me lots of calls of users who "forgot" their password :).
Here is another example, its of what I use:
<body onload=document.forms[0].FIELD_NAME_HERE.focus()>
Indy, go to this page, its got example code for what you are looking for.
{Link}
Sorry Jake - just testing to see if you validate/check postings before displaying them. I can't decide what to do on a site I'm designing.