New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

Auto-Focus Form Elements with JavaScript

After digging through the WordPress source code, I stumbled upon this very useful JavaScript method for auto-focusing form elements upon page load. Here is the JavaScript code (place within the document head):

<script type="text/javascript">
	function formfocus() {
		document.getElementById('element').focus();
	}
	window.onload = formfocus;
</script>

…and corresponding (X)HTML markup (abbreviated for clarity):

<form>
	<input id="element" />
	<input />
	<input />
</form>

In this example, the first form element (identified by id="element") will be automatically focused when the document loads, thus facilitating the process of entering data in the form. This technique would serve users well on login pages (wink, wink;), or anywhere forms are required on a repetitive basis.

Update 1

Here is a similar method of auto-focusing a form element with just a splash of JavaScript. Place the following code into an input element that contains a predefined field value and watch in amazement as the text string is automatically highlighted upon user focus. Here is the JavaScript snippet:

onfocus="this.select();"

..and here is a “live” example:

..and corresponding code:

<input onfocus="this.select();" value="Select this element to highlight text.." type="text">

Update 2

The method discussed in this article doesn’t work as expected in newer versions of Chrome. If that sounds like you, try this snippet instead:

<input onclick="this.select()" type="text" value="Select this element to highlight text..">

So to see that working in Chrome, try the demo:

Let me know if this technique stops working in a future version of Chrome.

Jeff Starr
About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
Blackhole Pro: Trap bad bots in a virtual black hole.

6 responses to “Auto-Focus Form Elements with JavaScript”

  1. Since I use a common header for a number of PHP pages, some pages have forms while others do not. To keep from throwing an error on the pages where the element does not exist, I enclosed the focus() action inside an if() statement

    function formfocus() {
    	if (document.getElementById('element')) {
    		document.getElementById('element').focus();
    	}
    }
    window.onload = formfocus;
  2. Jeff Starr

    Excellent tip – Thank you for sharing!

  3. Hi friend,

    Thank u very much for this logic and code. I was searching for it and just found @ this place. thank u very much. i gonna use your code for my software. thankz once again.

  4. Jeff Starr
    Perishable 2007/12/04 8:56 am

    My pleasure — happy to help ;)

  5. Hephaistus 2008/03/12 12:51 am

    you can also always select the first element of the form:

    aForm.elements[1].focus();

    this way you don’t need to know the id of the first element

    if you want to get the form and you just have one form:

    var aForm = document.forms[1];

  6. Jeff Starr
    Perishable 2008/03/12 1:33 pm

    Sweet tip, Hephaistus — thanks!

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Blackhole Pro: Trap bad bots in a virtual black hole.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.