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 ``` 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 ?

Accepted Answer

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

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

Solution

Problem