Don't annoy me with your crappy form field focus
27 October 2005
OK, when you have a page that is mainly about a form, focusing on the first field can be a good thing. Your index finger has a finite number of clicks in it, so why waste them on form elements? Jakob Nielsen even mentioned it among his tips this year, to prevent making one of the Top Ten Web Design Mistakes of 2005.
But, what happens when focusing the first field interrupts the user's flow of action? This:
Yes, while the page was loading you've already filled out the first field and moved onto the second. By the time you've looked up from your two finger tapping, you see that something's gone awry and your form data is out of whack. Grrrrr.
Solution? Write a field focus script that pays attention to user interaction.
- Check whether the user has focused on a field already. If so, do not attempt to refocus.
- Check whether the user has entered data into a form field already. If so, do not attempt to refocus.
The reason the script is extra long, is because handling text selections is probably the worst supported feature in all the browsers. Internet Explorer does it well. Mozilla does it differently, with no support for form field selection. Safari does it slightly worse than Mozilla, Opera worse again, and anything else you shouldn't even think about.
IE is the only browser that lets you tell whether a form field is focused, so it's the only one that executes that step, but all the other browsers check whether data has been entered, so at least you get most of the benefits and reduce your annoyance factor by about 90%.
Even if you don't use this particular script, the one thing that you should take away from reading this is that sometimes the solution can be worse than the problem.
Tested in Internet Explorer for Windows 5/5.5/6.0, Firefox 1.0.4, Opera 8.0, Safari 1.3 and Internet Explorer for Mac 5.2
Update: Bad offender: Google advanced search
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout