1 Stupidly Simple Way to Make Users VERY Happy

April 14, 2011    5 Comments

Automatically Put Cursor Form FieldThis post will teach you how to automatically put cursor in form field – click here to drop down to the tutorial below.

If you’re like me, you like to try to use your keyboard as much as possible.. or use your mouse as little as possible.

So when you go to log into a website and the username field doesn’t automatically have the cursor in it when the page loads, you get a little frustrated.

Oh, that only happens to me?

No but seriously, shouldn’t all websites automatically put your cursor in the form field which you most likely want to fill out?!

Go to http://www.gmail.com – if you were logged in already, log out and then go to there.

Did you notice how the username box is automatically highlighted, the cursor is already in there, and you’re ready to type?  Did you like that?

If you’re like me, you LOVED it! (I’m weird, have you got that by now?)

This is something that is super simple to do, and should definitely be done if you:

  • Have a login screen – if someone is coming to your site to log in, they would really appreciate the username filed being auto-focused.
  • Have a popular online tool that people use – Do a Google search for “Character Count” – The number 1 and 2 results should be javascriptkit.com and lettercount.com… LetterCount.com auto-focuses the textarea field, whereas javascriptkit.com does NOT… therefore, I will link to and use lettercount.com for my character count needs.
  • Want someone to fill out your form – think about it… user comes to your site and lands on a page that has a lead capture form.  If they see the first box of that form is already highlighted and has the cursor in there, ready to be typed into, they are more likely to fill it out!  Make sure you know the secrets to turning leads into sales, otherwise: don’t waste your money on any form of marketing, OK?

How to Automatically Place Cursor In Text Field

It’s really easy if you:

  • If you understand HTML & javascript relatively well
  • Have access to the source code of your site.

If you aren’t comfortable with HTML or javascript – OR – don’t know how to access the source code of your website… get in touch with us, we will figure it out (call 888-WEB-NUM1).

All you have to do is add this javascript to the page(s) you want the form field to automatically focus on:

<script type="text/javascript">document.theFormID.theFieldID.focus();</script>

Note: With this method, you MUST put the javascript line BELOW the form in the HTML.  Otherwise, it will try to execute and won’t find the form (because it hasn’t rendered yet).  There is an alternative method below.

Let’s do a quick breakdown of the pieces at work here, but first, make sure you know what an HTML element id is.

Your form and input box might be something like this:

<form action="" method="get" id="theFormID">
  <input name="username" id="theFieldID" type="text" />
</form>

The id of both the form and input elements are theFormID and theFieldID, repsectively.  If your

doesn’t have an id, you will need to give it one.  Similarly, if the form field you want to automatically put the cursor in doesn’t have an id, you need to give it one for this to work.

See an example here: http://www.webmechanix.com/auto-focus-text-field.html

Another Method to Auto Focusing Text Fields (On Page Load)

There is another, very similar, way to automatically put the cursor in the input field when the page loads.

This time, add this code to the tag, like this:

<body onload="document.theFormID.theFieldID.focus();">

onLoad is a built in javascript function which (when put on the tag) runs when the entire page has loaded.

Note: This method doesn’t seem to be working in IE7 or 8 (lame sauce).  So let’s try using the document ready javascript function

In the first example I noted that you have to put that javascript below your form so the focus(); function would be able to find the form elements (load order)… but with this example, the code would obviously be above the form HTML… but since it runs AFTER all the HTMl on the page is loaded, it will surely find the input or text field you want to automatically put cursor in.

Yet Another Method to Automatically Putting Cursor In Text Field On Page Load

What? Another method… yeah, that’s right — And this one works in ALL BROWSERS! (correct me if I’m wrong)

Here is the code:

<script type="text/javascript">
  $(document).ready(function(){
    document.homeform.input.focus();
  });
</script>

What this is doing (somewhat brilliantly in my opinion) is telling the javascript function to run after the page has loaded (similar to the method above using . For some reason, it works in all browsers – so I would recommend using this method.

So that’s it… go implement this on your website and make your visitors smile :)

UPDATE 8-24-12

It was brought to our attention (by Dave Roche) that the following function might work better:

function SetFocus () {
  var input = document.getElementById ("theFieldID");
  input.focus ();
  }

You will have to call this function when the page loads using eitheror jQuery.document.ready.

BONUS: Another Simple Way To Make Users Happy

One other pet peeve of mine is when the tabindex of form input fields are not set up properly.  For instance, click into the first box below, then press tab…

… Shouldn’t it go from the first box to the second, THEN to the third?  “Yes Arsham, it should… why doesn’t it?”

Because the tabindex is all screwed up.  This usually happens when there is more than one form on one page.

So if this is happening to your form input boxes and you don’t know how to fix it, call us @ 888-WEB-NUM1 (or fill out this form)

Go from Automatically Put Cursor In Form Field back to the main BLOG

Read more about Conversion Optimization

Go back to the WebMechanix HOMEPAGE




Written by: Arsham Mirshah (79 Articles)

WebMechanix co-founder, technical SEO, Google analytics junkie, & web dev'r who loves to ski, play tennis and demonstrate ROI.

Follow Arsham on Twitter    
  • imTimzee

    Thanks, real helpful. 

  • Noel Pineiro

    You forgot in the fourth code example to include jQuery

    $(document).ready(function(){
    document.homeform.input.focus();
    });

  • Randall

    HTML now supports autofocus=”autofocus” in an html form field.

  • Jenn Buckhahn

    I’m using something similar to the the first example, but using .

    In my form, I have changed my input type from text to number (to make it easier for mobile users), and it stopped working.

    Any thoughts or suggestions? Thanks!

    • http://www.webmechanix.com/ Arsham Mirshah

      Hmm, maybe javascript doesn’t see it as part of the form since it’s not an input, select, textarea, etc…

      You might have to try targeting it with getElementByID or jQuery instead.