Save 10% on our Pro WordPress plugins with discount code: 10PERCENT
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. Book Author. Secretly Important.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

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. 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. 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. 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 »
GA Pro: Add Google Analytics to WordPress like a pro.
Thoughts
Working on a new book :)
LinkedIn decided to replace my highly rated video course on WP security. For a limited time the course is still available to *logged-in* users via direct URL.
I enjoy listening to original Star Trek and NG episodes while working online. After a while it feels like I’m working on the ship as part of the crew, going on adventures.
New version (2.6) of my shapeSpace starter theme now available! Always free & open source for everyone :)
Finished updating all of my books! As always, book owners can download the latest versions for FREE :)
W3C.org has a very thorough list of accessibility tools.
The more you wake up, the more you realize you are still asleep.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.