how to create watermark effect using jquery in asp.net

Question

I got this article for doing this but i found that this is not working as i have given multiple classes in same textbox. How to convert this to work with multiple classes. I dont know how to use selectors to work with.

I am using it like this

<div class="inbox3full">
    <div class="threeinbg"><asp:TextBox ID="txtSortOrder" CssClass="threein water" 
            Text='<%# Bind("SortOrder") %>' runat="server" ToolTip="Type your Sort Order"></asp:TextBox></div>
</div>

with jquery as

<script type="text/javascript">
//    $(document).ready(function() { 
        $(function() {

            $(".water").each(function() {
                $tb = $(this);
                if ($tb.val() != this.title) {
                    $tb.removeClass("water");
                }
            });

            $(".water").focus(function() {
                $tb = $(this);
                if ($tb.val() == this.title) {
                    $tb.val("");
                    $tb.removeClass("water");
                }
            });

            $(".water").blur(function() {
                $tb = $(this);
                if ($.trim($tb.val()) == "") {
                    $tb.val(this.title);
                    $tb.addClass("water");
                }
            });
        });
   // });
    </script>

EDIT Sys is undefined.

.water{font-family: Tahoma, Arial, sans-serif;font-size:75%; color:black;}

<script type="text/javascript">
    $(document).ready(function() {
        $(".water").addClass('watermark');
        $(".watermark").live('focus', function() {
            $tb = $(this);
            if ($tb.val() == this.title) {
                $tb.val("");
                $tb.removeClass("water");
            }
        }).live('blur', function() {
            $tb = $(this);
            if ($.trim($tb.val()) == "") {
                $tb.val(this.title);
                $tb.addClass("water");
            }
        }).blur();​
    });

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
      $(".water").not(document.activeElement).blur();
    });
    </script>

Answer 1

Instead of an .each() like you have, it's easier to just fire the blur handler, like this (edited to use .live() since you're adding them in an UpdatePanel):

$(function() {
  $(".water").addClass("watermark");
  $(".watermark").live('focus', function() {
    $tb = $(this);
    if ($tb.val() == this.title) {
        $tb.val("");
        $tb.removeClass("water");
    }
  }).live('blur', function() {
    $tb = $(this);
    if ($.trim($tb.val()) == "") {
        $tb.val(this.title);
        $tb.addClass("water");
    }
  }).blur();​
});

You can see it working here. This puts the watermark/title in if the box was initially empty, which is usually what you want. Also when your PanelPanel finishes you'll want to call .blur() on those elements again to apply the watermark to freshly created ones, like this:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
  $(".water").not(document.activeElement).blur();
});

This will blur all elements except the currently focused one, as to not interrupt the user typing.