How to display watermark instead of value in textbox in ASP.Net MVC?

Question

In my view I have

<%= Html.TextBoxFor(m => m.Patient.Weight, new { title = "Weight" , style = "width: 3em", @class = "fieldRequired watermark" }) %> pounds</div>

when I run the application I got in my text box. When I delete the value from the textbox it will show watermark. So,How do I make like ?

Answer 1

The term you're looking for is placeholder.

There's an option with HTML 5 to specify a placeholder.

<input name="name" type="text" placeholder="Your name...">
@Html.TextBoxFor(m => m.Name, new { placeholder="Your Name..." })

However, it's not supported on all browsers. So you're off to JavaScript land.

Here's a popular option on NuGet - jQuery.placeholder. It'll read the HTML 5 attributes and handle fall-back for browsers that don't support it.

Just add the script at this in the document onload. And some css classes, check their docs for further info.

$('input, textarea').placeholder();

Edit: placeholder is supported in all major modern browsers