ASP.NET MVC 中的水印文本框答案

【问题标题】：Watermark TextBox in ASP.NET MVCASP.NET MVC 中的水印文本框
【发布时间】：2010-05-04 15:18:01
【问题描述】：

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

【问题讨论】：

标签： asp.net asp.net-mvc textbox watermark

【解决方案1】：

您可以使用如下的 Jquery 插件：

Watermark Plugin

提供了一个示例，使用简单。

【讨论】：

坚持使用 JQuery 而非 AJAX 控件
该链接已损坏。我相信正确的链接是plugins.jquery.com/watermark

【解决方案2】：

我会使用这个：http://digitalbush.com/projects/watermark-input-plugin/

【讨论】：

不幸的是，这个插件不太适合验证插件，因为它通过设置输入控件的值来工作，而接受答案的那个会创建一个覆盖范围。
感谢 mdresser。我去看看那个。

【解决方案3】：

在此处使用我的 Mvc 控件工具包的 TypedTextBox：http://mvccontrolstoolkit.codeplex.com/wikipage?title=TypedTextBox

【讨论】：

【解决方案4】：

我使用并推荐 ClearField jQuery 插件：http://labs.thesedays.com/projects/jquery/clearfield/

使用起来非常简单，如下所示（从上面的链接复制并粘贴）：

把它放在你的 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），您可能会使用这样的 ASP 控件：

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

对于“在页面某处添加此功能”的部分，您需要确保它位于这样的脚本标签中：

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

【讨论】：

【解决方案5】：

查看我的回答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");
                }
            });
}

【讨论】：

【解决方案6】：

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

【讨论】：