Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus
Post #585 categorized as Function, last updated on Jul 23, 2008
Tagged with elements, forms, javascript, tips, tricks, tutorials
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) like this:
<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 Example
To see a working example of this technique, check out the autoclear & restore demo page.
Share this..
Related articles
- Auto Clear and Restore Form Elements
- Auto-Focus Form Elements with JavaScript
- Quick JavaScript Tip: Auto-Highlight Form Inputs and Textareas
- Unobtrusive JavaScript: 5 Ways to Remove Unwanted Focus Outlines
- Unobtrusive JavaScript for ‘Print-This’ Links
- Unobtrusive JavaScript Dynamic Clock
- Spamless Email Address via JavaScript
#1 — Louis
You may want to indicate that this is done in a much easier way on Safari, by simply adding a “placeholder” attribute to the
inputelement (more here).Proprietary, but yet very cool.
You may also want to note that YUICompressor does a better job when talking about JS compression, and also that placing the JS at the end of the
bodyenhances the performances (you suggest thehead).