As you may or may not have noticed on my blog, when you click the “search box” just above this text, it will “wipe” the blurb text from that field…. and ONLY when its not got a custom value in (other than the default).

As always, using jQuery this is VERY simple to do

1) Include jQuery into your page:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

2) Add the following JS code into your page:

$(document).ready(function() {

	$('#search_input').focus( function() {
		var existing_string = "Enter your query...";
		if ($(this).val() == existing_string) {
			$(this).val("");
		}
	});

});

3) Then for the input field you want this to be the case for, make sure it has id=”search_input” as its ID (or change the above javascript to use the ID you have given yours)

For example:

<input name="s" id="search_box" type="text" value="Enter your query..." >

Thats it! Hope you enjoy

Copyright secured by Digiprove © 2011All Rights Reserved

Andy

I’ve been working as a Web-Design / Coder for many years now, and thought it was finally time for me to give back some of the stuff I’ve learned over the years. I started this blog in November 2010, and have already added quite a few varying articles to the site. I’m always looking for new suggestions, so please visit the forum, or shoot me an email with suggestions!

Website – More Posts

Categories: HTML / XHTML coding • jQuery