Filigrane pour zone de texte dans MVC3

Question

Comment puis-je définir un filigrane pour une boîte texbox dans MVC3. En outre, s'il y a plusieurs zones de texte dans une page Web, comment écrivez-vous un texte différent pour chaque zone de texte?

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

votre réponse Appréciez

Answer 1

Si je comprends bien votre question, vous pouvez simplement passer:

new { placeholder = "my watermark" } 

comme paramètre htmlAttributes dans Html.TextBoxFor.

Edit:

Vous pouvez également ajouter le support pour les anciens navigateurs en utilisant Javascript comme indiqué ici:

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

Answer 2

J'utilise généralement la jquery suivante, pour le projet MVC sur les champs qui ont besoin d'un filigrane. (le code compatible avec IE 6 - 9, Firefox 2 - 4, Safari 4.

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

/// JQuery code de plug-in

(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

Essayez cette Jquery. Vous devez créer une image avec le texte du filigrane.

$(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

En utilisant la norme MVC 3, et un navigateur compatible HTML5, vous pouvez faire:

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