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.

6 responses to “Auto-Focus Form Elements with JavaScript”
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 anif()
statementExcellent tip – Thank you for sharing!
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.
My pleasure — happy to help ;)
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];
Sweet tip, Hephaistus — thanks!