Водяной знак для Textbox в MVC3

Question

Как установить водяной знак для текстового поля в MVC3. Также, если на веб-странице несколько текстовых полей, как вы пишете различный текст водяного знака для каждого текстового поля?

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

Ценю ваш ответ

Answer 1

Если я понимаю ваш вопрос, вы можете просто ввести:

new { placeholder = "my watermark" }

в качестве параметра htmlAttributes в Html.TextBoxFor.

Изменить:

Вы также можетедобавьте поддержку старых браузеров, используя Javascript, как описано здесь:

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

Answer 2

Используя стандарт MVC 3 и браузер, совместимый с HTML5, вы можете:

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

Answer 3

Я обычно просто использую следующий 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 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");
                }
            });
}