Auto-Focus Form Elements with JavaScript

Published Monday, December 4, 2006 @ 2:50 pm • 6 Responses

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>

Dialogue

6 Responses Jump to comment form

1GasGiant

March 7, 2007 at 10:42 am

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;

2Perishable

March 7, 2007 at 10:49 am

Excellent tip - Thank you for sharing!

3Mangesh

December 3, 2007 at 9:14 pm

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.

4Perishable

December 4, 2007 at 8:56 am

My pleasure — happy to help ;)

5Hephaistus

March 12, 2008 at 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];

6Perishable

March 12, 2008 at 1:33 pm

Sweet tip, Hephaistus — thanks!

Subscribe to comments on this post


[ Comments are closed for this post. ]

If you have additional information, contact me.

← Previous post • Next post →

« Roll your own Apache Rewrite LogFeed Tester »

Contact Perishable Press

  • Contact Jeff via form

Search Perishable Press

About Perishable Press

Perishable Press is the virtual playground of Jeff Starr — visionary, founder and lead developer of Monzilla Media, a small web and graphic design company in the lush desert oasis of Moses Lake, Washington. Perishable Press features articles and tutorials on many aspects of digital design..

Read more..

Perishable on Twitter

heading out of town on a photographic excursion. great way to break up the routine.

Perishable on Tumblr

Office painted a warmish/neutral off-white color. New 2.1...

Tue, 02 Feb 2010


New office digs..


Night view..


Potential..

Office painted a warmish/neutral off-white color. New 2.1 Altec/Lansing speakers for crisp, clear sound. Two new executive desks: one for computer biz and another workspace for drawing, painting, and other offline pursuits. And of course, a big, cushy black office chair to make it all sweet.

Quick Photoshop Reset

Tue, 19 Jan 2010

Very good Photoshop trick to know: If you hold down ALT+CTRL+SHIFT (Mac: CMD+OPT+SHIFT) while starting Photoshop you can reset all settings back to factory default. Very useful if you have problems with some tools or the interface. – http://bit.ly/4A5LJ5

Insane October

Sun, 01 Nov 2009

By far the most insane month of 2009, October included the following activities:

1st week: Trip to the East Coast, beginning with some business in Connecticut.

2nd week: East Coast trip continues with much pleasure in downtown Manhattan.

3rd week: Photo and art excursions with good friend visiting from Portland, OR.

4th week: Marathon book-editing and fine-tuning for Digging into WordPress.

Now that November is here, things remain busy, but I am hoping to get a chance to restore some balance and regain my equilibrium. Of course, the holidays are right around the corner..

Import Feeds to Facebook

Mon, 07 Sep 2009

Seems like a lot of misinformation and confusion out there on how to import and display your feeds on Facebook. Here is what worked for me:

1. In the lower left-hand corner of your Facebook account, click on “Applications” > “Notes”.

2. In the upper mid-right column, click on “Import a blog” in the “Notes Settings” panel.

3. In the “Import an External Blog” panel, enter your feed URL and check the little box.

4. Click the “Start importing” button and then click on “Confirm Import” on the preview page.

That’s all there is to it. Don’t forget to edit your “Notes Privacy” settings to ensure that people can see and comment on your imported feed items.

Once you successfully import your feed(s), they will appear by clicking on the “Notes” button in the left sidebar of your Home page. Also, your timeline or “Wall” will also display the most recent post from each of your feeds as they are published and pulled into Facebook. This makes it easy for your “Friends” to see what you have been up to elsewhere on the Web.

help me in plain english

Mon, 31 Aug 2009

This has got to be the most ironic comment I have ever read:

“hi i dun a stupid noooby mistake and dint think about encrytion i just put a pass in the change pass box and now when i attempt to see my main.php or index.php its sayin password no and error how can i reset back to having no password or were can i edit the bit so that a pass is automattically seen or if not posable how can i make it so i can put in the pass i made at some point so i can login this way? the 3rd is most prefered as this will help me with other projects i am planning as i am a php noob :s plz sum1 hu is clever help me in plain english”

Thanks, “jay” — you made my week with that one.

Read more on Tumblr..

Subscribe to Comments Recent Dialogue

  • kn33ch41: "But for good browsers such as Opera and Safari, most users are quite savvy, understanding the game and always keeping their browsers...
  • Paul: First off great list. Probably the one of the best I've ever seen. I enjoyed your limiting of The Wall, and Dark Side of the Moon. He...
  • kn33ch41: I use method three, and use method four when a selector only requires one property....
  • r-a-y: Great code. Just wondering if, in certain scenarios, a permalink can be longer than 255 characters. I can think of a weird exam...
  • Jeff Starr: Thanks Oliver! Glad you enjoy the book. Thanks for the great feedback :)...
  • Perry: I've read a number of these Image Preloading techniques today and would like to know the best approach to use. I use PHP 5.3 on th...
  • Infographiste PAO: I didn't know that Jeff, that's a kind of great news, usually ppl don't know about no or dofollow so now it's gonna be alright withou...
  • Bill Brown: @Jakub: Of course, there are many ways to bypass the XML declaration issue when you have PHP short tags enabled. Since the intenti...
  • bucabay: AT Jakub ...
  • Jakub Lédl: Oh sh*t, I came back. What happened to that code I posted? Does this CMS remove PHP from comments or what? I now look like an idiot :...

Read more recent comments..

Attention: Do NOT follow this link!