how to clear form each specific input field on mouse click on it using jquery

Question

i have form with text inputs having some value i.e. please enter name etc etc. i want when the client clicks on the text field the default text to disappear. i after searching added the onclick="this.value=\'\'" but its not clearing please help.

Answer 1

You can use what stackoverflow uses on the search box:

<input onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

Also, here is a question about the same thing: How do I make an HTML text box show a hint when empty?

NOTE: With HTML5 you can use the following:

<input type="email" name="address" placeholder="john@example.net">

http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-placeholder

Answer 2

This should do that.

$('#yourFormId').find('input').click(function(){
    $(this).val('');

}

but what you probably actually want is something like the labelOVer plugin: http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/#labelOver

Answer 3

I recomnded use onfocus with onblur. If client set cursor into field text is hide, but if it does not write to filed - default text is return.

<input type="text" value="search" onfocus="if(this.value=='search') this.value=''" onblur="if(this.value=='') this.value='search'">

Answer 4

Its something like this,

$('#userName').onfocus(function(){
   if($(this).val() === 'User Name'){
    $(this).val('');
 }
})
.onblur(function(){
    if($(this).val() === ''){
        $(this).val('User Name');
     }
});