Watermark for MVC3 razors using Display (Prompt =

Question

I am trying to display a watermark for my Html.Editorfor,

Here is my ViewModel

[Display(Prompt="This is a WaterMark")]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyy}", ApplyFormatInEditMode = true)]
public DateTime Dob { get; set; } 

Here is my look

@Html.EditorFor(model => model.Dob)

here is my EditorTemplate String.cshtml in \ Views \ Shared \ EditorTemplates \ String.cshtml

@Html.TextBox("",ViewData.TemplateInfo.FormattedModelValue, new { @class="text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })

I tried this following this topic . But my watermark never appeared, but why?

Appreciate your help to solve this problem.

Answer 1

watermarks using Display (the hint never worked for me, but with this jquery you can show the watermark in the text box. Here I use the image instead of the watermark. You need to create an image of the watermark text.

 $(document).ready(function () {

            /*Watermark for date fields*/

             if ($("#dob").val() == "") {
                $("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px");
            }

            $("#dob").focus(function () {
                if (watermark == 'MM/DD/YYYY') {
                    $("#dob").css("background-image", "none");
                    $("#dob").css("background-color", "#fff");
                }
            }).blur(function () {
                if (this.value == "") {
                    $("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px");
                }
            });

            $("#dob").change(function () {
                if (this.value.length > 0) {
                    $("#dob").css("background", "#fff");
                }
            });
}

Answer 2

placeholder <input>. HTML5, , , - . , Internet Explorer, 10.0, ​​ .

, jquery, , .

Answer 3

To specifically answer your question: why the solution in the mail that you followed did not work for you: The reason the solution you are connected to does not work is because you are using IE. Try using the same code in Chrome - it will show the tooltip in order. Hopefully IE10 is catching up.