Watermark for a text box in MVC3

Question

How to set a watermark for texbox in MVC3. Also, if there are several text fields on a web page, how do you write watermarked text for each text field?

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

Rate your answer

Answer 1

If I understand your question, you can just go through:

 new { placeholder = "my watermark" } 

as the htmlAttributes parameter in the Html.TextBoxFor.

Edit:

You can also add support for older browsers using Javascript, as described here:

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

Answer 2

I usually use the following jquery for an MVC project in fields that need a watermark: (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); 

Answer 3

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

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

Answer 4

Try this jQuery. You need to create an image with 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"); } }); }