Plugin Sale! Save 15% on pro plugins with discount code: NEWYEAR2021
Web Dev + WordPress + Security

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 = Web Developer. Security Specialist. WordPress Buff.
WP Themes In Depth: Build and sell awesome WordPress themes.

2 responses to “Auto Clear and Restore Form Elements”

  1. August Klotz 2006/10/03 5:31 am

    Thank you for this post.

  2. Jeff Starr
    Perishable 2007/01/02 4:17 pm

    Happy to help!

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 »
.htaccess made easy: Improve site performance and security.
Thoughts
Watching. Waiting. Praying.
Got all of my free WordPress plugins updated for imminent WP 5.6 in early December. Pro plugin updates currently in the works.
7G Firewall now integrated into BBQ Firewall (free version). Pro version soon ;)
macOS Big Sur update complete. So far no crazy issues. Except TextEdit, which is completely screwed up and unusable. Replaced with free BBEdit.
Got so sick of macOS’ annoying “red dot” that I had to remove System Prefs from the dock. Come on Apple you can do better.
Beginning development of an Nginx version of 7G Firewall.
Happy Birthday to Perishable Press, celebrating 15 years online! :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.