JavaScript: how to set focus in page load

Apr 01 2009

You have this nice little login form in your home page…login-form

…and you want people to directly login as soon as they get to the site. 

To facilitate this, you have set up a small JavaScript code to set the focus automatically to the username text box:

function onPageLoad()
{
      document.form.username.focus(); 
}

There is a caveat here though.

Usually programmers place their JavaScript code in the HTML such a way that the code is run only after all the elements in the page is loaded.

Now the user comes to your site, the login form loads, but some other elements in the page are still loading.

The user starts typing in the username, then moves on to fill the password:

login-form-username

Your page completes loading now, and the JavaScript executes and sets the focus to username textbox. The user does not know this, he is still typing the password.

login-form-pasword

Oops!

The same usability glitch can occur in many similar situations involving user action.

In this specific situation, you can modify the code to something like:

function onPageLoad()
{
      if(document.form.username.value.length==0)
      {
             document.form.username.focus();
      } 
}

You can also try executing the script as soon as the form completes displaying, but as far as I know there are no reliable ways to do these because different browsers implement stuff differently. Even in the same browser things work inconsistently in different scenarios.

|

10 responses so far

  1. # Binny V Aon 01 Apr 2009 at 12:12 pm

    Nice. Another method is to do this…

    document.getElementById(“username”).focus();

    Ugly, but valid.

  2. # Binny V Aon 01 Apr 2009 at 12:13 pm

    Actually, there was a INPUT tag before that script. And a script tage enclosed the js code – but WP ate it.

  3. # Niyaz PKon 01 Apr 2009 at 12:35 pm

    That was what I was talking about. This would have been a good solution if it worked reliably. Unfortunately, it doesn’t always.

    Different browsers run the embedded JavaScript code in different stages of document load.

  4. # JavaScript: how to set focus in page load | Diovoon 01 Apr 2009 at 4:15 pm

    [...] Excerpt from: JavaScript: how to set focus in page load | Diovo [...]

  5. # Joyceon 01 Apr 2009 at 4:38 pm

    Or use jquery

    $(document).ready(function(){
    $(‘#username’).focus();
    });

    The ready function is triggered after the dom has completely loaded.

  6. # Niyaz PKon 01 Apr 2009 at 6:10 pm

    Joyce,

    Yeah. JQuery has done it neatly so that you don’t have to worry about the browser implemetations of onLoad.

    Again, even if you are using jquery, you have to use the if() condition to make the focus() code work better. That was the point of this article.

  7. # Silkyon 02 Apr 2009 at 12:08 pm

    Nice idea. This has always bothered me.

  8. # Panthayion 03 Apr 2009 at 12:58 am

    Thanks for the info dude.I think even google does’t knows about it.

  9. # Niyaz PKon 03 Apr 2009 at 11:22 am

    Silky, Panthayi,

    I am glad it helped.

  10. # ronon 13 May 2009 at 3:15 pm

    When we open the facebook page, note how the text in “Email” field is highlighted. As the user types in his email address it overwrites that text. Any ideas on how that could be done?

Leave a Reply