MVCフレームワークのWaterMark TextBox

Question

HTMLテキストボックスにウォーターマークを作成するにはどうすればよいですか？これはMVC3 Webアプリケーションです。

Answer 1

特にMVC（これはとにかくスクリプトです）ですが、とにかくMVCアプリケーションでおそらくjQueryを使用しているので、WatermarkのようなJQueryプラグインを使用できます。

Answer 2

あなたはHTML5を使用することができます場合は、新しいプレースホルダー属性

@Html.TextBoxFor(x => x.Field, new { placeholder = "Watermark here" }) 

を試すことができますそれは純粋なHTMLと同等です：

<input type="text" name="Field" id="Field" placeholder="Watermark here" /> 

Answer 3

このjQueryを使って、あなたのテキストボックス.Here Iに透かしを表示することができますウォーターマークの代わりにイメージを使用しています。ウォーターマークテキストのイメージを作成する必要があります。

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