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\" }         


        

Answer 1

(I wanted to include this as a comment but the system won't let me do that without 50 points... So I am placing it here as an "answer", even though I am focusing on terminology only.)

Actually, the OP's use of the term "watermark" is in alignment with Microsoft's use of the term as it relates to text boxes rendered by MVC Html helper objects that generate HTML input tags. Yet it is true that HTML5 introduces the placeholder attribute for input tags of type text, search, url, tel, email, and password. The disconnect here is that the HTML5 standard refers to the "hint text" you see in HTML input boxes as the "placeholder" text while Microsoft refers to it as the "watermark".

But Microsoft might have used the term specifically because it sometimes refers to an input tag's watermark as the image that has been specified in the style of that input object before data is entered by the user. So while Microsoft uses the term to describe the text or image that appears as a hint, the HTML5 placeholder attribute can only specify text.

Answer 2

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