Question

I am trying to write some watermark text on textbox and textarea. I can successfully add the watermark on the textbox. But on the textarea, it does not work. Anybody has seen this kind of thing before? how to solve this?

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

This is the jquery for watermark. I found this somewhere on the net.:)

<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

The problem is that your textarea doesn’t have a title attribute which is what you are trying to use in your javascript. It has a Title attribute which obviously is not the same. Also there’s no Value attribute defined. The value of a textarea is to be set on by using the InvoiceDetails property on your view model. So start by fixing your markup:

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

Then you may use the code provided in 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();

And here’s an live demo.