WaterMark TextBox в MVC Framework

Question

Как создать водяной знак в текстовом поле HTML? Это веб-приложение MVC3.

Answer 1

Если вы можете использовать HTML5, вы можете попробовать новый атрибут-заполнитель

@Html.TextBoxFor(x => x.Field, new { placeholder = "Watermark here" })

Это чистый эквивалент HTML:

<input type="text" name="Field" id="Field" placeholder="Watermark here" />

Answer 2

Не специально для MVC (в любом случае это скрипт), но так как вы, вероятно, в любом случае используете jQuery в своем приложении MVC, вы можете использовать плагин JQuery, например Watermark .

Answer 3

С помощью этого jquery вы можете показывать водяной знак на вашем текстовом поле. Здесь я использую изображение вместо водяного знака. Вам нужно создать изображение водяного знака.

$(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");
                }
            });
}