Making your forms auto-focus

One of the small, hard to notice features that I’ve encountered on a few games and grown to love is that of the auto-focusing form field. When you go to login or register, as long as your web browser has Javascript enabled, you’ll automatically be able to type into the first textbox that you need to – which makes signing up or logging in much easier.

It’s actually a very simple feature to add – all you need is three lines of Javascript:

1
2
3
window.onload = function() {
	document.getElementById('username').focus();	
}

The HTML you need to use looks like this:

<input type='text' id='username' />

And as long as you have both of those pieces, whenever a user visits the page the username input box will automatically get focused into. It’s a small and easy change to implement, and it makes a huge difference to how easy it is to use your game’s forms. For example, visit Urban Dead and Kingdom of Loathing and start typing the moment the page loads up – as you can see, on Kingdom of Loathing you’ve been focused into the text box, and can therefore just start typing to log in. On Urban Dead, you need to find the textbox, and then move your mouse over to it and click on it. It’s just not quite as nice and easy as having the field auto-selected for you.

Wish there was more?

I'm considering writing an ebook - click here.

.

Luke is the primary editor of Building Browsergames, and has written a large portion of the articles that you read here. He generally has no idea what to say when asked to write about himself in the third person.

Tuesday, May 20th, 2008 code, design, javascript, usability
  • man how can i remove smarty from equation? i dont understand how you added smarty... or how can i add functions to smarty? please help me

  • vincent

    thanks, been google for the result until i find this page, simple and straight

    more power

  • Caleb

    You can also use the tab index property to control where the cursor goes if the person presses tab. It could be annoying if your sign-up and login were on the same page and the cursor jumps from one to the other.

    <input type="text" name="username" tabindex="1">

    1 is highest priority then 2 and so on. 0 will only be cycled through after the others have been.

    Note that this doesn't replace document.getElementByld() ... but it helps for the after ward.

  • Ah, wonderful details! Thanks for adding this to the tutorial Luke!

  • It`s kinda confusing. You should put an example on the register.php or login.php

  • If you look at the register and login templates, you'll notice that they *
    both* have the code already implemented on them.
    If you are having trouble understanding how document.getElementById() works,
    you may want to learn a little bit more javascript before attempting to add
    it to your projects.

  • I've written a form autofocus script that does this in a way that handles some of the problems that come up with the topic, and generally automatically figures out what field to focus on. Thought you might want to know. :)

blog comments powered by Disqus

About

Building Browsergames is a blog about browsergames(also known as PBBG's). It's geared towards the beginner to intermediate developer who has an interest in building their own browsergame.

Sponsors

Got Something to Say?

Send an e-mail to luke@buildingbrowsergames.com, or get in touch through Twitter at http://twitter.com/bbrowsergames