Fall Sale! Code FALL2024 takes 25% OFF our Pro Plugins & Books »
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.

Update 3

Couple of modified/hybrid functions sent in by Grant Richardson:

“Just a quick but huge thanks for the post. This may seem simple to you, but I searched for 2 hours but couldn’t find anywhere how to set autofocus on woocommerce login form, so I used your code and GasGiant’s suggestion in the comments to put this together. Other methods I found didn’t work. I want to give back by sharing my solution to you. Please consider sharing for others in my situation who may need it. The following code goes in child theme’s functions.php or via a custom functions plugin:”

// autofocus woocommerce login form on username
// desired elementId can be found by inspecting the page html

function autofocus_on_login_form() {
	
	echo '<script type="text/javascript">';
	
	if (document.getElementById('username')) {
		echo 'document.getElementById("username").focus();';
	}
	
	echo '</script>';
	
}
add_action('wp_footer', 'autofocus_on_login_form');

“Here’s an updated version of the code snippet to share if you like. This version checks first to see whether the user is logged out and is on the woocommerce my-account page.”

function autofocus_on_login_form() {
	
	if (is_account_page() && !is_user_logged_in()) {
		
		echo '<script type="text/javascript">';
		
		if (document.getElementById('username')) {
			echo 'document.getElementById("username").focus();';
		}
		
		echo '</script>';
		
	}
	
}
add_action('wp_footer', 'autofocus_on_login_form');

About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
WP Themes In Depth: Build and sell awesome WordPress themes.

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

  1. GasGiant 2007/03/07 10:42 amReply

    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. Perishable 2007/03/07 10:49 am Reply

    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 Reply

    My pleasure — happy to help ;)

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

    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 Reply

    Sweet tip, Hephaistus — thanks!

Leave a reply

Name and email required. Email kept private. Basic markup allowed. Please wrap any small/single-line code snippets with <code> tags. Wrap any long/multi-line snippets with <pre><code> tags. For more info, check out the Comment Policy and Privacy Policy.

Subscribe to comments on this post

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 »
.htaccess made easy: Improve site performance and security.
Thoughts
Went out walking today and soaked up some sunshine. It felt good.
I have an original box/packaging for 2010 iMac if anyone wants it free let me know.
Always ask AI to cite its sources.
All free plugins updated and ready for WP 6.6 dropping next week. Pro plugin updates in the works also complete :)
99% of video thumbnail/previews are pure cringe. Goofy faces = Clickbait.
RIP ICQ
Crazy that we’re almost halfway thru 2024.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.