Question

如何在MVC3中为texbox设置水印。如果网页中有多个文本框，您如何为每个文本框编写不同的水印文本？

       <%:Html.TextBoxFor(mdl => mdl.inputTextSearch, Model.inputTextSearch )%>

感谢您的回复

Answer 1

如果我理解你的问题，你可以直接进入：

new { placeholder = "my watermark" }

作为Html.TextBoxFor中的htmlAttributes参数。

编辑：

您还可以使用此处概述的Javascript添加对旧版浏览器的支持：

http://www.standardista.com/html5-placeholder-attribute-script

Answer 2

我通常只使用以下jquery，对于需要水印的字段的MVC项目:(代码兼容IE 6 - 9，Firefox 2 - 4，safari 4。

 $('#UserSearch').Watermark("Search term", "#fff");

/// JQuery插件代码。

(function($) {
var map=new Array();
$.Watermark = {
    ShowAll:function(){
        for (var i=0;i<map.length;i++){
            if(map[i].obj.val()==""){
                map[i].obj.val(map[i].text);                    
                map[i].obj.css("color",map[i].WatermarkColor);
            }else{
                map[i].obj.css("color",map[i].DefaultColor);
            }
        }
    },
    HideAll:function(){
        for (var i=0;i<map.length;i++){
            if(map[i].obj.val()==map[i].text)
                map[i].obj.val("");                 
        }
    }
}

$.fn.Watermark = function(text,color) {
    if(!color)
        color="#aaa";
    return this.each(
        function(){     
            var input=$(this);
            var defaultColor=input.css("color");
            map[map.length]={text:text,obj:input,DefaultColor:defaultColor,WatermarkColor:color};
            function clearMessage(){
                if(input.val()==text)
                    input.val("");
                input.css("color",defaultColor);
            }

            function insertMessage(){
                if(input.val().length==0 || input.val()==text){
                    input.val(text);
                    input.css("color",color);   
                }else
                    input.css("color",defaultColor);                
            }

            input.focus(clearMessage);
            input.blur(insertMessage);                              
            input.change(insertMessage);

            insertMessage();
        }
    );
};
})(jQuery);

Answer 3

您可以使用MVC 3标准和符合HTML5标准的浏览器：

@Html.TextBoxFor(mdl => mdl.inputTextSearch, new { placeholder = "my watermark" })

Answer 4

试试这个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");
                }
            });
}

MVC3中Textbox的水印

4 个答案: