Question

I am trying to display water mark 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 view

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

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

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

I tried this by following this thread .But my watermark never showed up ,but why ?

Appreciate your help to resolve this

Answer 1

watermarking using Display(Prompt never worked for me. But with this jquery you can show watermark on your text box .Here I am using an image in place of 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");
                }
            });
}