Latest TweetsVerify any search engine or visitor via CLI Forward-Reverse Lookup perishablepress.com/cli-forwar…
Perishable Press

Auto Clear and Restore Form Elements

Using a small bit of JavaScript, it is possible to auto-clear and restore form elements when users bring focus to them. Simply copy, paste, and modify the following code example to achieve an effect similar to this:

Here is the HTML/JavaScript for your website:

<input value="Click here and this will disappear.." onfocus="if(this.value == 'Click here and this will disappear..') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Click here and this will disappear..';}" type="text" size="77" />

Update

Here is another auto-clear JavaScript trick that cleans up the HTML but does not auto-restore the element. Simply place the first code block into the document head (or external JavaScript file), and then flesh out form elements in the second of block of code and place within the document body:

<script type="text/javascript">
	function m(el) {
		if ( el.defaultValue == el.value ) el.value = "";
	}
</script>
<input type="text" name="target" value="This will disappear upon user focus.." onFocus="m(this)">
<input type="submit" name="submit" value="Submit">

Jeff Starr
About the Author Jeff Starr = Creative thinker. Passionate about free and open Web.
Archives
2 responses
  1. August Klotz October 3, 2006 @ 5:31 am

    Thank you for this post.

[ Comments are closed for this post ]