当前位置：文江博客话题详情

ASP.NET MVC 中的水印文本框

发布于 2024-08-31 06:13:49 字数 114 浏览 4 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空气里的味道 2024-09-07 06:13:49

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

Watermark Plugin

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

回复收藏 0 原文

你在看孤独的风景 2024-09-07 06:13:49

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

回复收藏 0 原文

醉梦枕江山 2024-09-07 06:13:49

在这里使用我的 Mvc Controls 工具包的 TypedTextBox： http://mvccontrolstoolkit.codeplex.com/wikipage?title =键入文本框

回复收藏 0 原文

新雨望断虹 2024-09-07 06:13:49

我使用并推荐 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>

I use and recommend ClearField jQuery plugin: http://labs.thesedays.com/projects/jquery/clearfield/

It's very simple to use as shown here (copied & pasted from link above):

Put this in your HTML pages header:

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

Add this function somewhere on the page:

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

Your input field might look like this:

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

If you were using with ASP.NET (not MVC), you'd possibly be using an ASP control like this:

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

For the part where it say's "Add this function somewhere on the page", you'd want to make sure it's within script tags like this:

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

回复收藏 0 原文

手心的海 2024-09-07 06:13:49

检查我的答案这里

使用这个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");
                }
            });
}

Check my ans here

with this jquery you can show watermark on your text box .Here I am using an image in place of watermark.You need to create an image of the watermark text.

$(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");
                }
            });
}

回复收藏 0 原文