jQuery delete text onfocus

Question

I've been trying to have a default value in a text input, then with jQuery, when you "onfocus" the textbox, it makes the text black (default a light gray), and deletes the default value. I think you know what I'm talking about, so do you know how to accomplish this?

Answer 1

<input class="txtClass" type="text" defaultVal="Enter your Name" />
<input class="txtClass" type="text" defaultVal="Enter your Designation" />

javascript

$('body').ready(function(){
  $('.txtClass').each( function () {
    $(this).val($(this).attr('defaultVal'));
    $(this).css({color:'grey'});
      });

  $('.txtClass').focus(function(){
    if ( $(this).val() == $(this).attr('defaultVal') ){
      $(this).val('');
      $(this).css({color:'black'});
    }
    });
  $('.txtClass').blur(function(){
    if ( $(this).val() == '' ){
      $(this).val($(this).attr('defaultVal'));
      $(this).css({color:'grey'});
    }
    });
});

See working example: http://jsbin.com/ovida3
http://jsbin.com/ovida3/2

Answer 2

The jquery watermark plugin allows you to achieve the desired effect.