Save 10% on our Pro WordPress plugins with discount code: 10PERCENT
Web Dev + WordPress + Security

Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus

In an effort to organize my pile of offline notes, I will be posting a number of quick, “to-the-point” tutorials on a number of useful topics. In this post, I share an excellent method for auto-clearing and restoring multiple form field inputs using a bit of unobtrusive JavaScript. This method was discovered at xy.wz.cz. There are two steps to this technique, which should take no longer than five minutes to implement.

Step 1: Prepare the Form

Begin by preparing your form as you would like it to function without JavaScript. For example, you may have a comment form that looks something like this:

<form>
	<fieldset>
		<label for="author">Name</label>
		<input type="text" name="author" id="author" value="Name" />
		
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="Email" />

		<label for="website">Website</label>
		<input type="text" name="url" id="url" value="Website" />

		<label for="comment">Comment</label>
		<textarea id="comment" name="comment"></textarea>

		<input id="submit" name="submit" type="submit" value="Submit" />
	</fieldset>
</form>

Make sure that each of the form inputs has a type value of text. That’s all we need to do to prepare the form. To summarize this first step, any form inputs with at least the following attributes will work just fine with the auto-clear/restore script:

<input type="text" value="Name" />
<input type="text" value="Email" />
<input type="text" value="Site" />

Step 2: Add the JavaScript

In a file named “autoclear.js” (or whatever), add the following slice of JavaScript:

function init(){
	var inp = document.getElementsByTagName('input');
	for(var i = 0; i < inp.length; i++) {
		if(inp[i].type == 'text') {
			inp[i].setAttribute('rel',inp[i].defaultValue)
			inp[i].onfocus = function() {
				if(this.value == this.getAttribute('rel')) {
					this.value = '';
				} else {
					return false;
				}
			}
			inp[i].onblur = function() {
				if(this.value == '') {
					this.value = this.getAttribute('rel');
				} else {
					return false;
				}
			}
			inp[i].ondblclick = function() {
				this.value = this.getAttribute('rel')
			}
		}
	}
}
if(document.childNodes) {
	window.onload = init
}

And then call it from your (X)HTML document (the one containing the form):

<script src="autoclear.js" type="text/javascript"></script>

Alternately, the script may be placed in the head section of the (X)HTML document that includes the form. Also, to improve performance, you may want to compress the script using an online JavaScript compressor.

Once everything is in place, upload and check it out. Everything should work great, even in good ol’ IE 6! ;)

Styling Forms

For more help creating, styling and enhancing your (X)HTML forms, check out Chris Coyier’s excellent CSS-Tricks article Tips For Creating Great Web Forms.

Autoclear Demo

To try a live example, check out the Autoclear & Restore Demo »

Jeff Starr
About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

38 responses to “Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus”

  1. Lewis Litanzios 2009/03/08 9:12 pm

    Sorry! My bad. I should have checked.

    I’m more concerned about getting it working for and , and less about size, at this point in time. Any thoughts?

    I’ve tried duplicating the script, but with (’textarea’), and changing up the variables etc but I think my JS arrangement is to blame – can’t get it working. Drop me an email if you like.

    Appreciate the help.

  2. Lewis Litanzios 2009/03/08 9:13 pm

    Sorry again, I’m messing your blog up here, hehe. Hopefully this works…

    I’m more concerned about getting it working for <input> and <textarea>, and less about size, at this point in time. Any thoughts?

    I’ve tried duplicating the script, but with (’textarea’), and changing up the variables etc but I think my JS arrangement is to blame – can’t get it working. Drop me an email if you like.

    Appreciate the help.

  3. Lewis Litanzios 2009/03/08 9:27 pm

    Haha, Snook (http://twitter.com/snookca) just sent me to that very page! Cheers mate.

    Best.

  4. Jonathan Ellse 2009/03/31 8:32 am

    Is this the same piece of code that highlights the search box in Quintessential when you hover over it? Or is that something different?

  5. Jeff Starr 2009/04/06 1:08 pm

    @Lewis Litanzios: Great minds think alike! ;)

    @Jonathan Ellse: That’s just a bit of CSS trickery. I use the active and hover pseudo-classes to change the style on activation and hover, respectively.

  6. You can make this work with textareas, in the following way.
    http://pastie.org/558938

  7. Jeff Starr 2009/07/25 4:47 pm

    Thanks Dale — I may be updating the post or even writing up a new article with this information. Cheers :)

  8. Hi Jeff,

    I’m brand new to Javascript and I have a question about your script. Are you storing the default value of the field in the “rel” attribute for any particular reason? Is this just simpler than using a variable?

    I know I’m a year and a half late but thanks for the great post!

  9. Jeff Starr 2009/12/20 9:24 am

    Hi SK, you know, quite honestly I don’t remember why this script worked out the way it did. Using the rel is certainly cleaner than using a variable, so maybe that is indeed the reason..

  10. Hey there, thank you for this script… I have a small question:

    Is there anyway to change the colour of the default values? For example, in many similar scripts, the default values are usually in a lighter color than ones that are user input…

    Many thanks for this,

  11. Hey Jeff…

    Thanks for posting my plugin to @lewis! I wanted to let you know I’ve since updated the plugin and am hosting it on github. I added password field support.

    Check it out, thanks!

    http://github.com/joemsak/jQuery-AutoFill

  12. @Mohamad — my plugin has this option… see above

    (@jeff — sorry for double post. I should have read more comments so I could consolidate my responses)

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 »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
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.