Question

我正在尝试在textbox和textarea上写一些水印文本。我可以在文本框上成功添加水印。但是在textarea上，它不起作用。以前有人见过这种事吗？怎么解决这个？

<%:Html.TextAreaFor(m => m.InvoiceDetails, new {Value="Invoice detailes",@class = "water", Title = "Invoice detailes" })%>

这是水印的jquery。我在网上找到了这个地方。:)

<script type="text/javascript">
$(function () {

    $(".water").each(function () {
        $tb = $(this);
        if ($tb.val() != this.title) {
            $tb.removeClass("water");
        }
    });

    $(".water").focus(function () {
        $tb = $(this);
        if ($tb.val() == this.title) {
            $tb.val("");
            $tb.removeClass("water");
        }
    });

    $(".water").blur(function () {
        $tb = $(this);
        if ($.trim($tb.val()) == "") {
            $tb.val(this.title);
            $tb.addClass("water");
        }
    });
});

Answer 1

问题是您的textarea没有title属性，这是您尝试在javascript中使用的属性。它有一个Title属性，显然不一样。此外，还没有定义Value属性。通过在视图模型上使用InvoiceDetails属性来设置textarea的值。首先修复你的标记：

<%: Html.TextAreaFor(
    m => m.InvoiceDetails, 
    new { 
        @class = "water", 
        title = "Invoice detailes" 
    }
) %>

然后您可以使用this answer中提供的代码：

$('.water').addClass('watermark');
$('.watermark').live('focus', function() {
    var $tb = $(this);
    if ($tb.val() == this.title) {
        $tb.val('');
        $tb.removeClass('water');
    }
}).live('blur', function() {
    var $tb = $(this);
    if ($.trim($tb.val()) == '') {
        $tb.val(this.title);
        $tb.addClass('water');
    }
}).blur();

这是一个live demo。

asp.net mvc3 textarea的水印

1 个答案: