input,textear 水印实现【原创】

效果如下：

CSS代码

.watermark{ color:#999}

JS代码

(function($) {
  $.fn.watermark = function(c,t) { 
    // c 水印样式
    // t 水印提示信息 
    $(this).focus(function(){
       var tf=$(this).hasClass(c);
       if(tf==true){
          $(this).removeClass(c).val(""); //清空水印提示
         }
     });
     
    $(this).blur(function(){
      t=$.trim(t); //去除前后空格
     var text=$.trim($(this).val());
     if(text.length==0){
        $(this).addClass(c).val(t);
       }
      
      
     }); 
  
  }
})(jQuery);

页面引用
<input type="text" id="username" class="watermark" value="请输入姓名"/>

$(function(){
     $("#username").watermark("watermark","请输入姓名");
});