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，您可以在文本框中显示水印。这里我使用的是图像代替水印。您需要创建水印文本的图像。

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

MVC框架中的WaterMark TextBox

3 个答案: