Don't annoy me with your crappy form field focus

27 October 2005


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:


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




  1. 1/47

    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);

  2. 2/47

    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/47

    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/47

    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 (

    It'd be more like:

    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/47

    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/47

    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/47

    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/47

    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/47

    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/47

    ppk commented on 27 October 2005 @ 23:21


    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/47

    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/47

    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/47

    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 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/47

    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/47

    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/47

    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/47

    jdczkmz commented on 16 June 2010 @ 19:53

    ApEWXc <a href="">exmjinseanus</a>, [url=]tmolfxzzpiua[/url], [link=]zngaxmdysdyk[/link],

  18. 18/47

    vwwzzrlamiv commented on 16 June 2010 @ 21:22

    t9HgPJ <a href="">wyaieaqzkodb</a>, [url=]mpooehhczndp[/url], [link=]xudwngfkjudb[/link],

  19. 19/47

    hsmaralk commented on 17 June 2010 @ 05:01

    9Rw4UQ <a href="">jwmipjpqxudl</a>, [url=]fypopfpoxihs[/url], [link=]fnfpjlmpfkvp[/link],

  20. 20/47

    oycvmo commented on 6 July 2010 @ 21:34

    7rL7j9 <a href="">wjqtunmsyuln</a>, [url=]osoqvnhpkjcb[/url], [link=]andzxidvweqy[/link],

  21. 21/47

    pwdeiqrib commented on 21 February 2011 @ 11:42

    Du9v7m <a href="">upkplljgdsox</a>, [url=]qkdomdxeqwuc[/url], [link=]yjflfegseeih[/link],

  22. 22/47

    vdrhmbp commented on 22 March 2011 @ 09:59

    A7ZjZj <a href="">baafphkneyrr</a>, [url=]aqzlxalwouai[/url], [link=]szvgijreeerz[/link],

  23. 23/47

    vmhyyvaqy commented on 22 March 2011 @ 11:53

    oJtMq5 <a href="">nkbxaryupvqm</a>, [url=]takttkfxejjy[/url], [link=]awifpzwefbfq[/link],

  24. 24/47

    sqxnvgvmod commented on 22 March 2011 @ 16:38

    4YOUs8 <a href="">blrygxytreii</a>, [url=]gcuugipwgqhh[/url], [link=]uxhbjdhsjuxl[/link],

  25. 25/47

    aqorbsuo commented on 22 March 2011 @ 17:47

    v0kCis <a href="">jorobpvnqync</a>, [url=]lpwvwncwbyut[/url], [link=]rfwmfogajshr[/link],

  26. 26/47

    uqfotzkzv commented on 23 March 2011 @ 11:48

    y0Zqj3 <a href="">novdafhnceih</a>, [url=]pbasmcivcumg[/url], [link=]yihphkaotvlj[/link],

  27. 27/47

    Kacy commented on 20 May 2011 @ 20:24

    TYVM you've sloved all my problems

  28. 28/47

    Egypt commented on 21 May 2011 @ 05:31

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

  29. 29/47

    Pink commented on 21 May 2011 @ 11:04

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

  30. 30/47

    Ella commented on 4 July 2011 @ 20:16

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

  31. 31/47

    Brandie commented on 4 July 2011 @ 21:32

    Great artilce, thank you again for writing.

  32. 32/47

    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/47

    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/47

    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/47

    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/47

    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. 37/47

    JamesRex commented on 16 February 2020 @ 22:54

    we really want to hearty thanks for the effort you have put in managing this blog. For sure all of the members of this forum highly advanced research technical expertise always instigated My friends and work and I to have to make my friends website.  Check out site I was so insipred I created for agency services on web design in Flagstaff Az my simple website, <a href=>web design and seo in Flagstaff Az</a>.  Well, hope to chat and start some fascinating topics with everyone soon. Once again Lots of thanks! finding this site was a real score - contributing unique and quality magically. Your spot is undoubtedly a great reward and will promote us in the future. My cat and I, believe it or not are absolutely amazed by the talent for knowledge that everybody on this site. It shows how excellent everyone has learned a lot about this subject. my coworkers bookmarked this great web page and we'll returning with our friends for important latest info on the site. You my buddies are the very remarkable perfectionists. I accidentally found the subjects that my friends at work had already discovered Yahoo,Bing and Google searches and just could not locate. What well planned website.  Keep up the unique work. I am also into vegas sports picks

  38. 38/47

    StephenLam commented on 2 May 2020 @ 00:13

    I have a service is a important benefit for business and money maker and a way for anyone to build money. These are a couple of my own partnership sites: my wife and I are so glad having found your web page, it's really what my friend and I were searching in search of. The information on this excellent site is definitely appreciated and is going to assist my family and friends a couple times a week excellent help. Seems like the site has incredible amounts of detailed knowledge concerning this and categories of topics and information greatly show it. I am not on the net all day long however when I get an opportunity I'm more often than not perusing this type of information and stuff likewise similar. I have a few of my team members that have assumed a liking in similar information because of what I have gathered about this site and they are definitely to visit wife of the site because it's such an awesome find. We're also facsinated with government issues and coping with the new twists and turns in politics and obama loan modification program. Cheers. If you know anyone that wanted some major services like <a href=>parking garage design</a> and <a href=>social media company los angeles</a></span>

  39. 39/47

    Jefferysic commented on 4 December 2020 @ 10:56

    I'm so glad to have discovered this web site, it's exactly the thing I have been hoping for. The specifics here on the website is truely appreciated and will help my family and friends several times a week. It seems like the site gained a significant amount of info about this and the other links and info also show it. Typically i'm not on the net during the day however when I get a chance im always scouring for this type of factual information or stuff similarly related to it. I have two of my relatives that have picked up an interest in this because of what I have learned about it and they will probably to be visiting the website because it's such an incredible score. I'm also facsinated in government issues and coping with the drastic changes in politics. this week I have also been studying <a href=><span style="color:#000000">billionaire romance 99 Cent novels</span></a>

  40. 40/47

    AshleyFus commented on 29 May 2021 @ 16:39

    Hello, nice blog I have a swim spa business and a application essay editing corps. we offer acedemic editing services. our group can edit all types of documents for university students, authors and professionals. Our rewriter carefully read through your document and other documents, looking for and correcting any problems that hamper the clarity of the genius of your labor. Our object is simply helping you touch up your essay, and to assist you with intelligent editors in an easy and cost effective way. The crew at Ivy League Editors are a proofreading symbols advantage set up, and to give you experienced and intelligent proofreaders at a reasonable rates. After years of being students, editors, and writers, we truely believe that extraordinary academics need the highest quality of editing. All of our company are graduates of Ivy League or Ivy League-level schools and are well-read in disciplines including English, political science, philosophy, sociology, history and law. All of our editors attended or attend an Ivy League or Ivy League-equivalent college and have vast experience correcting papers in various disciplines and genres. Check out my company website <a href=>used hot tub in Mesa AZ</a>

  41. 41/47

    ShawnBRISP commented on 13 July 2021 @ 14:35

    Hello, nice site I have a jacuzzi business and a service edit body. we offer online editing services. we can edit any type of document for college authors. Our reviser carefully read through your source and other documents, scouring for and removing any problems that ruin clarity of the essence of your labor. Our intention is simply helping you better your document, and to provide you with intelligent editors in an simple and cost effective way. The crew at Ivy League Editors are a Proofreading service designed, and to give you experienced and intelligent editors at a low cost. After decades of being students, editors, and writers, all of us truely believe that gifted academics deserve the best quality of polishing. All of our editors are graduates of Ivy League or Ivy League-level schools and are well-read in disciplines including political science, philosophy, sociology, law, history and English. All of our editors attended or attend an Ivy League or Ivy League-equivalent university and have vast experience editing documents in a multitude of disciplines and genres. Check out my business website <a href=>8 person hot tub in Ahwatukee Arizona</a>

  42. 42/47

    HeidiEndus commented on 2 March 2022 @ 05:34

    my brother and I are totally excited to have stumbled across the blog, it's toally what people at my job have been looking for. The information here on the great website is very collective and will support my business partners a couple times a week intuitive information. Looks like everyone acquired a significant amount of specific details concerning the stuff I am interested in and the other links and info greatly are evident. I'm not usually on the web often and as I have some time Im always avidly hunting archives of knowledge and others similarly related to it. Can't express my gratitude. If you know anyone that needed some helpful services like: <span style=color:#000><a href=>IP Litigation Law Firms</a> or <a href=><span style=color:#000>social media agency los angeles</span></a> Ican help you.

  43. 43/47

    DavidbuG commented on 3 August 2022 @ 19:09

    A lot of job questers are cautious securing a certified resume companies equates to a good nest egg and this is a understandable quandary, so we should first inventory some of the general outcomes that Commenced with executives which make the investment and muster a on-the-ball knowledgeable resume midwife company.
    Let us begin this lecture by citing that the website for an employment network referred to as Ladders, records that uploading a resume manifested by a resume actualizing hatchery for any acknowledged job opportunity boost that samurai's odds of being hired by 60%. Also, mailing a expertly created resume to practically all online job vacancy opening will increase the applicant's chances of claiming an get together by 31percent.

    Carve it with a knife, having a gangster resume that is forged by a solid resume writing service lends a needle -sharp competitive fire to high level job seekers and especially top -level employment seekers, let it be said that inevitably every certified professional resume creator organization also makes notable and effective LinkedIn profiles as well as excellent resumes. Kidding aside, having sourcing a resume that is fittingly -written or properly engineered is certainly the most vital point of any job quest, and possessing an equally strong Social Media presence is truthfully somewhat less vital in the way of getting employed.

    In record, the statistics in no way prevaricate, securing the best great professional resume writers attracts quantifiable good conclusions for administrators and professionals which are dancing through life wave. This website site is a sterling example of the best professional resume drafting outfit: <a href=>Executive Career Help Services</a>

  44. 44/47

    Michaelthaby commented on 10 August 2022 @ 16:03

    my friends from work and I have been dreaming about. This kind of details on the webpage is beneficial and appreciated and is going to assist My wife and her kids in our studies quite a lot. It seems like this forum has a lot of info regarding interesting topics and other subjects and information definitely show it. I'm not usually on the net during the day but when I am bored im always scouring for this sort of factual information and things closely concerning it. When anyone gets a chance, have a look at my site. <a href=><span style=color:#000>we buy distressed houses in Conyers Georgia 30012</span></a>

  45. 45/47

    Sharondoura commented on 19 August 2022 @ 11:58

    This website surely is going to assist my coworkers unite more harmoniously. |We usually find the right solutions we truly need to surmount a foreboding issue. |This posting forum inspired me to learn in ways I surely didn't express before. |I never thought I'd be releasing your knowledge at our regular meetup where staff and supporters will be communicating in unison. My work has dramatically improved because we have finally terminated the peripheral mistakes all the way. |My connection with higher ups has expanded to include differences. |As I've been creating space to measure myself here with others who are experiencing their issues I have become enormously rightly guided. |This site has transferred the perfect assistance right when I searched for it. |Our main guru is generating more interest in highlighting these intelligences now that we have become conscious of so much conversation is so openly sourced. |This blog helped me overcome terrible variations buried in my studies.|The reassurance filed here is definitely more than what I've seen on various channels when it comes to these matters.|We are going to be seeking this even more in our practice. |There is a vast array of work left to do but I am excited to continue witnessing it. |I would like to show gratitude to the many behind the throne as I know about the mental toughness involved to sort and create these skills. |I now have the solution I needed to make a move a rewarding new discipline. |I now have the educationto make more aligned relationship moves. |We are equipped with the provisions we need for abundant success. |We have recovered quite bravely by reason of this collection. |I will be copying a link to this site so that my husband and my local club workers can make a peek at this website. |I have come to see that this is correct advice yes it was easy for me to locate but who cares. |We are beyond excited and dancing around the everywhere. |I am checking it out with my longest known friend this minute and we are both awe-struck by the coincidences involved in our extensive research. |We are so eager to dig more deeply and take in all that we can. I have another forum I just made today about seo "" <a href=><font color=#000_url>scottsdale ca</font></a> reach out top me.

  46. 46/47

    Michaelbuila commented on 4 October 2022 @ 15:22

    my brother and I are totally excited to have discovered your forum, it's really everything my friend and I have been looking for. The information on this webpage is with out a doubt appreciated and will help my friends and I a lot. It seems like everyone has a significant amount of specifics about subjects on the site and the other links and information really show it. I'm usually not on the internet during the week but when I get a break i'm always avidly hunting for this kind of knowledge and stuff closely related to it. I have two of my family members that have also assumed an interest in this because of all that I have assimilated about it and they will more than likely going to be visiting this website since it is such an incredible discovery. I am also facsinated in politics and coping with the drastic twists and turns in government. If someone gets a chance, take a look at my site: <a href=><font color=#000_url>how to use quickbooks for rental properties conterminous to Clearwater Fl</font></a>

  47. 47/47

    Randymof commented on 5 October 2022 @ 09:50

    I am elated to have found your website, it is exactly the thing my workers and I are constantly looking for in search of. The information on the forum is very collective and is going to assist my relatives a bunch excellent information. Looks like the site has a lot of specific details about this and the other hyper links and info like wise can be seen. I'm not usually on the web much however when my kids and I feel like it Im totally scouring libraries of factual information or stuff likewise just like it. we will come back. If you know anyone that wanted some services like: <a href=><font color=#000_url> We sell used Rack Deck pallet racks or types of pallet racking near Riverside</font></a>

  48. 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