17 Jun, 2010
Clear default text in input boxes on click with jQuery
The following Javascript will clear default text value in input boxes when you click on them. To trigger the Javascript, you’ll need to specify both title and value attributes and set class of the input field to “text”. jQuery library is required for this to work.
Javascript
$('.text').focus(function () {
if ($(this).val() == $(this).attr("title")) {
$(this).val("");
}
}).blur(function () {
if ($(this).val() == "") {
$(this).val($(this).attr("title"));
}
});
Examples:
<input type="text" name="q" class="q text" value="Search for terms" title="Search for terms" /> <input type="password" name="password" class="text" value="Password" title="Password" />
Found this article useful? Share it with your friends:
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Hello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more 
Is this not 100x more simpler? :)
.. http://www.webdeveloper.com/forum/showthread.php?t=143399
Hi James,
Your example does look simpler but it’s not an ideal solution because Javascript is not accessed via DOM and it will require you to put the same piece of code multiple times if you want to apply it to more than one input box.
Alternate Method :-
==============
$(document).ready(function(){
$(“#btnclear”).click(function()
{ $(‘:text’).val(“”); });
});
====
#btnclear is the id of the button
$(document).ready(function(){
$(“#btnclear”).click(function()
{ $(‘:text,textarea’).val(“”); });
});
this will clear text area too