How to create Water Mark effect in Jquery

Watermark effect is very easy using jQuery

Here is a quick sample:

Step 1: Create CSS:

 <style type="text/css">  
     .flds{list-style:none;padding:0;margin:0}  
     .flds li{padding-bottom:10px;}  
     .flds input,.flds textarea{border:solid 1px #3d3d3d;color:#}  
     .waterMark{color:#c5c5c5;}  
 </style>  

Step 2: HTML Form:

 <ul class="flds">  
 <li>  
     <span>Name</span>  
     <input id="v1" type="text" />  
   </li>  
 <li>  
     <span>Address </span>  
     <textarea cols="20" rows="3"></textarea>  
   </li>  
 <li>  
     <input type="submit" value="OK" />  
   </li>  
 </ul>  

Step 3: jQuery for Water Mark Effect:

 /*This is the function*/  
   jQuery.fn.WMark = function () {  
     //Each loop to find all textbox and text area  
     $("input[type=text],textarea").each(function () {  
       ///Hide Span Tag  
       $("span", this.parentNode).hide();  
       ///Hide Show WaterMark CSS effect in Focus and Blue Event  
       $(this).addClass('waterMark').val($(this).prev().text()).focus(function () { if (this.value == $(this).prev().text()) { $(this).removeClass('waterMark').val(''); }; }).blur(function () { if (this.value == '') { $(this).addClass('waterMark').val($(this).prev().text()); }; });  
     });  
   };  
   $(document).ready(function () {  
     ///Cell water mark function  
     $('.flds').WMark();  
   });  

Click here to see the Demo: