jQuery TextBox Water Mark with asp.net

A jQuery alternative to the AjaxControlToolkit TextBoxWaterMarkExtender

I stole majority of this code from http://www.aspcode.net/A-watermark-texbox-with-JQuery-and-aspnet.aspx but I added a bit to make it swap css classes as well

$().ready(function() {
  swapValues = [];
  $(".wm").each(function(i) {
    swapValues[i] = $(this).val();
    $(this).focus(function() {
      if ($(this).val() == swapValues[i]) {
        $(this).val("").removeClass("watermark")
      }
    }).blur(function() {
        if ($.trim($(this).val()) == "") { $(this).val(swapValues[i]).addClass("watermark") } }) })
});

To use it, make sure your TextBox has (one of) it's css classes set to "wm". If you want a seperate style to be applied add that initially as well, in my example, it swaps "watermark" in and out as a css class.

<asp:TextBox ID="txt" runat="server"
  Text="this is the watermark" CssClass="wm watermark" />

Comments (1) -

Comments are closed