MVC框架中的WaterMark TextBox

Question

如何在HTML文本框上创建水印？这是一个MVC3 web应用程序。

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的(无论如何这都是脚本)，但由于您可能在MVC应用程序中使用了jQuery，所以您可以使用JQuery插件，如Watermark。

Answer 3

有了这个jquery，你就可以在你的文本框.Here上显示水印了，我用一个图片代替了watermark.You，需要创建一个水印文本的图片。

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