Don't annoy me with your crappy form field focus

27 October 2005

36 comments

A Blue Perspective: Don't annoy me with your crappy form field focus

» Improved Form Field Focus «

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:

Name:

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.

OK, so your JavaScript code just went from 1 line to 78, but with good reason – it's less likely to piss off your users. What the focusField() function on my example page does is:

  1. Check whether the user has focused on a field already. If so, do not attempt to refocus.
  2. 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

Categories

,

Comments

  1. 1/36

    Antone Roundy commented on 27 October 2005 @ 08:42

    Another solution that requires less than 78 lines is to use setTimeout to watch for when the browser creates the first form field and then focus on it. That way you don't have to wait till the entire body is loaded, so you can set the focus before the user has time to do any typing. Here's the code (assuming the form's name is theForm and the field you want to put the focus in is theField):

    function SetFocus() {
        if (document.theForm && document.theForm.theField)        document.theForm.theField.focus();
        else setTimeout('SetFocus()',100);
    }
    setTimeout('SetFocus()',100);

  2. 2/36

    Jonathan Snook commented on 27 October 2005 @ 11:13

    I'm a little confused. Firstly, why create an array of form elements to check? Why not just loop through all of them regardless? My thoughts are that you'd be able to chop the second part of the script in half. Plus, why not check against the defaultValue (or defaultSelected, or defaultChecked) instead of whether an item is checked or not or has a value or not, since it may realistically contain a default state other than blank?

  3. 3/36

    Jonathan Snook commented on 27 October 2005 @ 11:35

    Sorry for the appropriation of content but check out a quick example I put together. And while not officially tested, should work in most browsers.

    Any particular reason to use .getAttribute("type") when .type works just fine?

  4. 4/36

    Rob commented on 27 October 2005 @ 11:51

    Argh, this is where I wish other browsers were more like IE.  IE has a non-standard activeElement property (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/activeelement.asp)

    It'd be more like:
    if(!document.activeElement){
        target.focus();
    }

    Unfortunately, "There is no public standard that applies to this property."  -- I'm no fan of that phrase, but it drives me nuts when other browsers' adopting the good idea would save me 75 lines of cross-browser compensation like this.

  5. 5/36

    The Man in Blue commented on 27 October 2005 @ 15:43

    Antone: Yes, I'd normally use a an element load scheduler but I figure this script is handy for any window.onload jockeys that just want to throw it in.

    Jonathan: Good call on defaultChecked/defaultValue, script has been modified. Nothing seems to support defaultSelected, though, and Opera doesn't recognise defaultValue on select boxes, so you have to check for that.

  6. 6/36

    The Man in Blue commented on 27 October 2005 @ 16:16

    Oh, BTW, I use getAttribute() because it's more future-proof than using a direct dot property. Once you're in XML land, .type should theoretically have no meaning. But hey, it doesn't make a difference at the moment.

  7. 7/36

    CornedBee commented on 27 October 2005 @ 18:17

    Instead of a timer-based JavaScript scheduler, at least in non-IE I'd probably catch the DomMutationEvent.
    Using this event, you can get instant notification of element creation.

  8. 8/36

    danbee commented on 27 October 2005 @ 21:01

    Maybe I'm just odd, but I hate it when a page automatically sets focus on a form field. It's only one click! I prefer a page that doesn't assume what I'm going to do.

    On another note, the comment field doesn't seem to work properly in Firefox 1.5 Beta 2 until I turn Javascript off.

  9. 9/36

    Jonathan Snook commented on 27 October 2005 @ 22:43

    Both DOM 1 HTML and DOM 2 HTML have .type as a valid property. I think it would be unlikely that any browser would drop support for these DOM specifications. In XML land, <a> should theoretically have no meaning either. A browser will have to attach meaning to it.

  10. 10/36

    ppk commented on 27 October 2005 @ 23:21

    Cameron,

    Great idea! But...

    Can you please explain why you want to check for a selection? I just don't see the point, and removing this feature would make the script 80% shorter.

    I agree with Jonathan that looping through all form fields and check if the current value is different from the defaultValue is probably a better way of doing this.

  11. 11/36

    The Man in Blue commented on 27 October 2005 @ 23:27

    Yeah, not checking for a selection would definitely make it shorter.

    I was going for the situation where a user has clicked on a field, is maybe thinking, then starts typing, inbetween which the field might have been re-focused.

    *shrug* Modify as you see fit. My main point was to try and reduce blanket refocusing. So, if you implement any of these steps, you're heading in the right direction.

  12. 12/36

    Jo commented on 28 October 2005 @ 09:52

    I prefer using this method when I *by a ccident* click anf go to another page and would use the back-button, the form would set the focus on the last entry I made, cookies required I guess.

    Or use this method for form validation and set the focuss on the field where invalid or empty. Of course other better methods can be used for that such as server-side validation. If available that is ...

    This rounds up my thoughts.

  13. 13/36

    Tony commented on 29 October 2005 @ 02:15

    Totally agree how annoying that can be. Worst offender is Hotmail (which I use exclusively for giving my email on online purchases...) The page takes forever to finish loading, and MANY times, your password accidently gets typed...in plane view of those around you, on the E-Mail Address line. Just as I'm typing my password, focus shifts to the E-Mail Address line. Horrible...

  14. 14/36

    Lars commented on 12 December 2005 @ 07:35

    Makes me remember that once i did a form like that :

    - focus on the first field

    - if ENTER is pressed, check the required fields are not blank, and focus on the next blank but required field

    - if all required fields are filled and ENTER is pressed, send the form

    Another one i did for authentication form :

    - in the password, field check if the CAPS LOCK is on, and if yes, than display a message alerting the user that CAPS is on, a bit like in MSN Messenger... The only downside is that it can only do the check once the user presses a key, not before.

  15. 15/36

    Victor commented on 6 February 2006 @ 22:34

    Will this work with disabled form elements? The Code Project has a nice example taking this into account.

  16. 16/36

    bart commented on 15 February 2006 @ 05:42

    Auto focusing an element may sometimes be annoying. I had a search form at the top of the page that I was reusing at the bottom of the results page. When the results page rendered, the page was auto-scrolled to the bottom because of the auto-focus. To view the first result, I'd have to scroll back up to the top of the page. I fixed this once I realized what was happening, but just beware of placement of the form. Autofocus when the field is above the fold.

     

  17. 17/36

    jdczkmz commented on 16 June 2010 @ 19:53

    ApEWXc <a href="http://exmjinseanus.com/">exmjinseanus</a>, [url=http://tmolfxzzpiua.com/]tmolfxzzpiua[/url], [link=http://zngaxmdysdyk.com/]zngaxmdysdyk[/link], http://ygxzfefgkjfh.com/

  18. 18/36

    vwwzzrlamiv commented on 16 June 2010 @ 21:22

    t9HgPJ <a href="http://wyaieaqzkodb.com/">wyaieaqzkodb</a>, [url=http://mpooehhczndp.com/]mpooehhczndp[/url], [link=http://xudwngfkjudb.com/]xudwngfkjudb[/link], http://oawzbvzbnirr.com/

  19. 19/36

    hsmaralk commented on 17 June 2010 @ 05:01

    9Rw4UQ <a href="http://jwmipjpqxudl.com/">jwmipjpqxudl</a>, [url=http://fypopfpoxihs.com/]fypopfpoxihs[/url], [link=http://fnfpjlmpfkvp.com/]fnfpjlmpfkvp[/link], http://jkslfkhllbcf.com/

  20. 20/36

    oycvmo commented on 6 July 2010 @ 21:34

    7rL7j9 <a href="http://wjqtunmsyuln.com/">wjqtunmsyuln</a>, [url=http://osoqvnhpkjcb.com/]osoqvnhpkjcb[/url], [link=http://andzxidvweqy.com/]andzxidvweqy[/link], http://vuvgfkyczzwr.com/

  21. 21/36

    pwdeiqrib commented on 21 February 2011 @ 11:42

    Du9v7m <a href="http://upkplljgdsox.com/">upkplljgdsox</a>, [url=http://qkdomdxeqwuc.com/]qkdomdxeqwuc[/url], [link=http://yjflfegseeih.com/]yjflfegseeih[/link], http://ipbpvscmvitb.com/

  22. 22/36

    vdrhmbp commented on 22 March 2011 @ 09:59

    A7ZjZj <a href="http://baafphkneyrr.com/">baafphkneyrr</a>, [url=http://aqzlxalwouai.com/]aqzlxalwouai[/url], [link=http://szvgijreeerz.com/]szvgijreeerz[/link], http://hilutaxdjfec.com/

  23. 23/36

    vmhyyvaqy commented on 22 March 2011 @ 11:53

    oJtMq5 <a href="http://nkbxaryupvqm.com/">nkbxaryupvqm</a>, [url=http://takttkfxejjy.com/]takttkfxejjy[/url], [link=http://awifpzwefbfq.com/]awifpzwefbfq[/link], http://loeynbnamxdl.com/

  24. 24/36

    sqxnvgvmod commented on 22 March 2011 @ 16:38

    4YOUs8 <a href="http://blrygxytreii.com/">blrygxytreii</a>, [url=http://gcuugipwgqhh.com/]gcuugipwgqhh[/url], [link=http://uxhbjdhsjuxl.com/]uxhbjdhsjuxl[/link], http://utssyhlecbwf.com/

  25. 25/36

    aqorbsuo commented on 22 March 2011 @ 17:47

    v0kCis <a href="http://jorobpvnqync.com/">jorobpvnqync</a>, [url=http://lpwvwncwbyut.com/]lpwvwncwbyut[/url], [link=http://rfwmfogajshr.com/]rfwmfogajshr[/link], http://wwaoepaivfmq.com/

  26. 26/36

    uqfotzkzv commented on 23 March 2011 @ 11:48

    y0Zqj3 <a href="http://novdafhnceih.com/">novdafhnceih</a>, [url=http://pbasmcivcumg.com/]pbasmcivcumg[/url], [link=http://yihphkaotvlj.com/]yihphkaotvlj[/link], http://hdcldgkbhxjw.com/

  27. 27/36

    Kacy commented on 20 May 2011 @ 20:24

    TYVM you've sloved all my problems

  28. 28/36

    Egypt commented on 21 May 2011 @ 05:31

    Thanks for the insight. It brgins light into the dark!

  29. 29/36

    Pink commented on 21 May 2011 @ 11:04

    Your answer was just what I neeedd. It’s made my day!

  30. 30/36

    Ella commented on 4 July 2011 @ 20:16

    Your answer was just what I nedeed. It’s made my day!

  31. 31/36

    Brandie commented on 4 July 2011 @ 21:32

    Great artilce, thank you again for writing.

  32. 32/36

    Qamar commented on 26 August 2012 @ 17:01

    I\'ve recently stetrad a site, the information you provide on this site has helped me greatly. Thanks for all of your time & work. A creative man is motivated by the desire to achieve, not by the desire to beat others. by Ayn Rand.

  33. 33/36

    Rosa commented on 27 August 2012 @ 03:38

    Erin,these photos are eslpaicely poignant, at least for me, since I have held her just once. Kate Lauren, you have touched me just like the 13 other grandchildren we have, but your unique ebony hair, perfectly pursed lips and the softest skin this side of heaven have reminded me how someone as small and tiny as you can steal an old man's heart, and make him feel so much joy. Thank you sweetheart, I already know I will love you forever Our appreciation to your Mom & Dad for bringing such a beautiful child into our earthly presence.Love, Grandpa Dusty

  34. 34/36

    Zawmin commented on 27 August 2012 @ 04:27

    erin, these are exactly as i had in my head when we were shotoing. they turned out perfectly. i love love love the relaxed lifestyle sessions and this family were perfect models for it. baby d is a charmer. my favorite is the one of him with arms stretched out on his blanket ready to take on the world. my second favorite is the set of mom and dad on the couch with him asleep taken from the side and from above. those are so peaceful and colorful at the same time. a good balance of colors and calmness. lovely work! we need more of these types of models and sessions!lesli

  35. 35/36

    Jably commented on 27 August 2012 @ 09:14

    these are exactly as i had in my head while we were shiootng.i love the ones on the couch from the side and the top down. such a good balance of color and calmness. this baby was perfect and mom and dad made our job so easy. love how these turned out. we need more of these types of models and sessions. i'm in love. lesli

  36. 36/36

    Jesse commented on 27 August 2012 @ 14:42

    This is such great news! I was going to email you back but I will just leave a comment here. Thanks for the crmaea advice and I am sooooo bummed I will have to wait EVEN LONGER to have a session with you! Someday we will have some E F originals gracing our walls! Until then, take care! I'm so excited about baby #5 for you guys!!! What an adventure:)

  37. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed