Jump Menu : Content | Explore | Comments | Search | Home | Sitemap | Contact | Login | Access.

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: [ May 29th, 2007 ] - 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:

<form action="http://domain.com/" method="post">
   <div>
      <input onfocus="this.select();" value="Select this input element and this text will be highlighted.." size="55" type="text">
   </div>
</form>

Related articles

About this article

This is article #250, posted by Perishable on Monday, December 04, 2006 @ 02:50pm. Categorized as Function, and tagged with code, forms, html, javascript, tips, tricks, xhtml. Updated on March 25, 2008. Visited 22942 times. 6 Responses »

BookmarkSubscribeExplore

« Roll your own Apache Rewrite Log • Up • Feed Tester »


6 Responses

1 • March 7, 2007 at 10:42 am — GasGiant says:

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 • March 7, 2007 at 10:49 am — Perishable says:

Excellent tip - Thank you for sharing!

3 • December 3, 2007 at 9:14 pm — Mangesh says:

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

MNP,
JiLMaiL.com
JiLMaiL Email Platform.

4 • December 4, 2007 at 8:56 am — Perishable says:

My pleasure — happy to help ;)

5 • March 12, 2008 at 12:51 am — Hephaistus says:

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 • March 12, 2008 at 1:33 pm — Perishable says:

Sweet tip, Hephaistus — thanks!

[ Comments are closed for this post. ]


Set CSS to lite theme
Set CSS to dark theme