asp.net的水印mvc3 textarea

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属性。 textarea的值将通过在视图模型上使用InvoiceDetails属性设置。因此，通过固定的标记开始：

<%: 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。