9

How do I set watermark for a texbox in MVC3 .Also if there are multiple textboxes in a web page, how do you write different watermark text for each textbox?

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

Appreciate your response

Sweta
  • 311
  • 2
  • 3
  • 12
  • Watermark in what sense, a javascript solution or the new HTML5 [placeholder](http://davidwalsh.name/html5-placeholder)? – Brad Christie Jun 22 '11 at 19:21

4 Answers4

20

If I understand your question, you can just pass in:

new { placeholder = "my watermark" }

as the htmlAttributes parameter in Html.TextBoxFor.

Edit:

You can also add support for older browsers by using Javascript as outlined here:

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

gram
  • 2,772
  • 20
  • 24
  • I tried that earlier and iam getting this error, No overload for method 'TextBoxFor' takes 3 arguments – Sweta Jun 22 '11 at 19:27
  • 4
    Try this: <%:Html.TextBoxFor(mdl => mdl.inputTextSearch, new { placeholder = "my watermark" })%> – gram Jun 22 '11 at 19:35
3

Using the MVC 3 standard, and an HTML5 compliant browser you can do:

@Html.TextBoxFor(mdl => mdl.inputTextSearch, new { placeholder = "my watermark" })
Chris - Haddox Technologies
  • 1,867
  • 1
  • 18
  • 33
3

I usually just use the following jquery,for MVC project on fields which need a watermark: (the code compatible with IE 6 - 9, Firefox 2 - 4, safari 4.

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

/// JQuery Plugin code.

(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);
Nickz
  • 1,880
  • 17
  • 35
  • The only problem with this approach is when the user does not enter anything in the watermarked field, the field validates ok since the watermark is perceived to be the value. – Gichamba Feb 29 '12 at 18:42
  • I handled this by removing watermark onSubmit HideAll. I've found a more complete version that the above plugin I put together. http://code.google.com/p/jquery-watermark/. Hopefully this helps you out. – Nickz Feb 29 '12 at 23:42
0

Try this Jquery .You need to create an image with the watermark text.

$(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");
                }
            });
}
Lee
  • 665
  • 3
  • 7
  • 16