Marca de agua para el cuadro de texto en MVC3

Question

¿Cómo configuro la marca de agua para un texbox en MVC3? También si hay varios cuadros de texto en una página web, ¿cómo se escribe texto de marca de agua diferente para cada cuadro de texto?

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

Agradecemos su respuesta

Answer 1

Si entiendo su pregunta, sólo puede pasar en:

new { placeholder = "my watermark" } 

como parámetro htmlAttributes en Html.TextBoxFor.

Editar:

También puede añadir soporte para navegadores antiguos mediante el uso de Javascript como se indica aquí:

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

Answer 2

Normalmente yo sólo uso el siguiente jQuery, para el proyecto de MVC en los campos que necesitan una marca de agua:. (el código compatible con IE 6 - 9, Firefox de 2 - 4, Safari 4.

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

/// jQuery Plugin código

(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

Pruebe este Jquery. Necesita crear una imagen con el texto de la marca de agua.

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

Answer 4

Utilizando el estándar MVC 3, y un navegador compatible con HTML5 que puede hacer:

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