jQuery form titles

I thought I’d share a little technique that I occasionally use when coding forms with a limited amount of space. It’s a simple effect that allows you to contain the form input or textarea title within the form allowing the user to click inside the form input to remove it. You often see this used on search fields

The JavaScript

firstly we assign a class of ‘form-field’ as well as adding the attribute ‘defaultVal’ with the text that we want to display in our input field.

The code below simply adjusts the input value attribute depending on if the user click in the field and types text so we have a state of change for ‘focus’ and ‘blur’.

$(document).ready(function(){

  $('.form-field').each( function () {
    $(this).val($(this).attr('defaultVal'));
    $(this).css({color:'#ccc'});
      });

  $('.form-field').focus(function(){
    if ( $(this).val() == $(this).attr('defaultVal') ){
      $(this).val('');
      $(this).css({color:'#000'});
    }
    });
  $('.form-field').blur(function(){
    if ($(this).val() == '' ){
      $(this).val($(this).attr('defaultVal'));
      $(this).css({color:'#ccc'});
    }
    });

});

The HTML

 <form method="post" action="">

	    <input type="text" class="form-field" name="Name" defaultVal="Name" value="" />
            <input type="text" class="form-field" name="Phone" defaultVal="Phone Number" value="" />
            <input type="text" class="form-field" name="Email" defaultVal="Email address" value="" />
            <input type="text" class="form-field" name="Url" defaultVal="Site URL" value="" />

	</form>