ASP.NET MVC中的水印文本框

Question

在ASP.NET MVC中实现水印文本框控件的最简单方法是什么？互联网上是否有这样的控件（codeplex可能）。 我想这是很简单的写一个扩展HtmlHelper和使用jQuery水印文本框实现。

Answer 1

你可以使用一个jQuery插件，像下面这样：

Watermark Plugin

提供了一个样本，简单易用。

Answer 2

您可以使用AJAX Control Tookkit Watermark控件。

Answer 3

我会用这一个：如图所示http://labs.thesedays.com/projects/jquery/clearfield/

它的使用方法很简单：http://digitalbush.com/projects/watermark-input-plugin/

Answer 4

使用我的MVC TypedTextBox控件工具箱这里：http://mvccontrolstoolkit.codeplex.com/wikipage?title=TypedTextBox

Answer 5

我使用和推荐克利尔jQuery插件这里（复制&从上面的链接粘贴）：

把这个在你的HTML页头：

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.clearfield.js"></script> 

在页面上的某处添加此功能：

$(document).ready(function() { 
    $('.clearField').clearField(); 
}); 

你输入字段可能是这样的：

<input type="text" class="clearField" value="What's your name?" /> 

如果你用ASP.NET（不MVC）使用，你'd可能会使用像这样的ASP控件：

<asp:TextBox ID="Search" runat="server" CssClass="clearField">Search Something</asp:TextBox> 

对于零件E - 这说的“页面上的某处添加此功能”，你会希望确保它的脚本标记内是这样的：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.clearField').clearField(); 
    }); 
</script> 

Answer 6

检查我答here

与这个jQuery你可以显示水印你的文本框。在这里我正在使用图像代替水印。您需要创建水印文本的图像。

$(document).ready(function() { 

      /*Watermark for date fields*/ 

      if ($("#dob").val() == "") { 
       $("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px"); 
      } 

      $("#dob").focus(function() { 
       if (watermark == 'MM/DD/YYYY') { 
        $("#dob").css("background-image", "none"); 
        $("#dob").css("background-color", "#fff"); 
       } 
      }).blur(function() { 
       if (this.value == "") { 
        $("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px"); 
       } 
      }); 

      $("#dob").change(function() { 
       if (this.value.length > 0) { 
        $("#dob").css("background", "#fff"); 
       } 
      }); 
}