Watermark for MVC3 razor using Display(Prompt=

问题:

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

回答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");
                }
            });
}

回答2:

This code successfully renders the placeholder attribute in the corresponding <input> tag. This is an HTML5 attribute that the browser that you are using must support in order for something to happen. For example if you are using Internet Explorer, it's only in its future 10.0 version that will be added support for this attribute.

There are client scripting solutions such as the jquery watermark plugin that you could use to attach the desired behavior for browsers that do not natively support it yet.

回答3:

To answer specifically your question: why the solution in the post you were following didn't work for you: Reason the solution you linked to didn't work is because you use IE. Try the same code in Chrome - it will show the prompt alright. I hope IE10 will catch up.