在表单中使用水印效果

Question

我想在我的html表单中实现水印效果。

我有这样的代码http://jsfiddle.net/aMjT4/1/

我想具体的值设置为我的所有文本框。像在我的文本框字段

<input type="text" id="firstName" name="firstName" value="Enter First Name" class="inputTextboxId"/> 

我想从值设置水印文本（值=“输入名字”）。

我的javascript看起来像这样，但它会设置水印文本到我的所有表单域。

$(document).ready(function() { 
     var watermark = 'Enter something...'; 
     $('.inputTextboxId').blur(function() { 
      if ($(this).val().length == 0) 
       $(this).val(watermark).addClass('watermark'); 
     }).focus(function() { 
      if ($(this).val() == watermark) 
       $(this).val('').removeClass('watermark'); 
     }).val(watermark).addClass('watermark'); 
    }); 

如何为所有文本框设置值文本？

我有这段代码，但在这段代码中，我必须为所有文本框编写它。 有没有什么方法可以让这个变得广泛？

<input type="text" id="city" name="city" value="Enter Your City" class="inputTextboxId" onblur="if (this.value == '') { this.value = 'Enter Country City';this.style.color = 'Gray'; }" maxlength="255" onfocus="if(this.value == this.defaultValue){this.value='';this.style.color='Black'}"/> 

Answer 1

这是困难的方法。你只想写一个插件或抓住一个随时可用的插件。

http://plugins.jquery.com/project/TinyWatermark

http://plugins.jquery.com/plugin-tags/watermark

这里有一个我写

这是js文件的代码;

(function ($) { 
    $.fn.extend({ 
     watermark: function() { 
      return this.each(function() { 
       var $obj = $(this); 

       $obj.val($obj.attr("watermarkText")); 

       $obj.focus(function (e) { 
        if ($obj.val() == $obj.attr("watermarkText")) 
         $obj.val(""); 
       }); 

       $obj.blur(function (e) { 
        if ($obj.val() == "") 
         $obj.val($obj.attr("watermarkText")); 
       }); 

      }); 
     } 
    }); 
})(jQuery); 

然后在你的html中;

<script> 
     $(function() { 
      $(".watermark").watermark(); 
</script> 

<input id="author" value="" type="text" name="author" watermarkText="Your name..." class="watermark required">