Setting HTML Input Field Focus on Load

By | July 1, 2008

It seems pretty simple, but still far too many web sites don’t set the focus on the input field that users are most likely to type into when loading a page.

Let’s say you have a page with an HTML form with the ID login with fields named user and password. Here’s the HTML and JavaScript for setting the focus to the user field on page load. IE lets you get away with being a bit sloppy and not properly referencing the HTML form element, but the code below works on Firefox, Safari, and other standards-compliant browsers.

<html>
<head>
<title>Focus Test</title>
  <script>
    function setFocus() {
      var loginForm = document.getElementById("login");
      if (loginForm) {
        loginForm["user"].focus();
      }
    }
  </script>
</head>
<body onload="setFocus();">
  <form id="login" method="post" action="">
    <table>
      <tr>
        <td><div align="left">User Name:</div></td>
        <td><div align="left"><input name="user" type="text"
            size="30" maxlength="30" tabindex="1" /></div></td>
      </tr>
      <tr>
        <td><div align="left">Password:</div></td>
        <td><div align="left"><input name="password" type="password"
            size="30" maxlength="50" tabindex="2" /></div></td>
      </tr>
  </form>
</body>
</html>

You can prove to yourself it works here.

Of course, there are lots of slight variants on this. You could give the field an ID and set the focus directly on it without getting the form first.

10 thoughts on “Setting HTML Input Field Focus on Load

  1. Robert

    Hmm, it used to work for me on Firefox 3.0.x.

    But, it’s not working for me on a pre-release of Firefox 3.1. I’m using Shiretoko as a browser now. Shiretoko is an Intel-optimized binary for OS X based on 3.1b3pre of Firefox. Then again, I’ve run into a bunch of problems with this build of Firefox (both the official Mozilla beta build and Shiretoko).

    It works on Safari 3.2.1.

    @Bas, what browser are you using?

    Reply
  2. Dallas

    You would think there should be an eazier way. Like just setting an elements property for focus to true.

    Reply
  3. chip

    Is there a way to change the focus of a web page directly using the html link? Something like….

    http://www.webpage.html:username (where username is the field I want to set the focus to on load)

    I would like to be able to open a specific webpage and have it automatically drop me in the field I need to start typing information into. I thought I remember doing something like this several years ago but cannot remember excactly how I did it.

    Any help would be greatly appreciated.

    Thanks,

    Chip

    Reply
  4. chip

    Is there a way to change the focus of a web page directly using the html link? Something like….

    This… www . WebPageAddress . html : ‘username’ (where ‘username’ is the field I want to set the focus to on load)

    I would like to be able to open a specific webpage and have it automatically drop me in the field I need to start typing information into. I thought I remember doing something like this several years ago but cannot remember excactly how I did it.

    Thanks,

    Chip

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.