MVC3'te Metin Kutusu için Filigran

Question

MVC3'te bir metin kutusu için filigranı nasıl ayarlayabilirim.Ayrıca bir web sayfasında birden çok metin kutusu varsa, her metin kutusu için farklı filigran metinleri nasıl yazıyorsunuz? Html.TextBoxFor içinde htmlAttributes parametre olarak

new { placeholder = "my watermark" } 

:

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

Sorunuzu anlıyorum

Answer 1

Eğer yanıtınız takdir, sadece içinde geçebilir.

Düzenleme:

burada belirtilen Ayrıca Javascript kullanarak eski tarayıcılar için destek ekleyebilir

:

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

Answer 2

Genellikle sadece ihtiyaç alanlarda MVC proje için aşağıdaki jquery kullanmak filigran:. (IE 6 ile uyumlu kod - 9, Firefox 2-4, safari 4.

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

/// JQuery Plugin kodu

(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

Bu JQuery'yi deneyin. Filigran metniyle bir görüntü oluşturmanız gerekir. MVC 3 standardını kullanarak

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

, ve yapabileceğiniz bir HTML5 uyumlu bir tarayıcı: hangi manada

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