Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
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 = Creative thinker. Passionate about free and open Web.
SAC Pro: Unlimited chats.

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

  1. Avatar photo

    Very nice, Joe — Thanks for the update!

  2. thanks for the tutorial. its fantastic that you’re sharing your knowledge!

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 »
GA Pro: Add Google Analytics to WordPress like a pro.
Thoughts
Daylight savings is a complete waste of time and needs to be eliminated.
Got a couple of snow days here in mid-March. Fortunately it's not sticking.
I handle all email in real time as it comes in, perpetually clear inbox for years now.
Added some nice features to Wutsearch search engine launchpad. Now 21 engines!
.wp TLD plz :)
Nice collection of free SEO APIs and user-agent lookups for Googlebot, Bingbot, Applebot, YandexBot, and more.
90% of online customer support is just explaining how to do basic troubleshooting.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.