워터 마크 asp.net mvc3 textarea

Question

텍스트 상자 및 텍스트 영역에 일부 워터 마크 텍스트를 쓰려고합니다. 성공적으로 워터 마크를 텍스트 상자에 추가 할 수 있습니다. 그러나 텍스트 영역에서는 작동하지 않습니다. 아무도 이런 종류의 것을 본적이 없습니까? 어떻게 해결할 수 있을까요?

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

문제는 당신의 텍스트 영역은 당신이 당신의 자바 스크립트 사용하려고하는 것입니다 이는 title 속성이 없다는 것입니다. 분명히 같지 않은 Title 속성이 있습니다. 또한 Value 속성이 정의되어 있지 않습니다. 텍스트 영역의 값은 뷰 모델의 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을합니다.