By 06/02/2014 6 Comments

How To Create an ASP.NET TextBox Watermark Effect using jQuery

What is watermark effect ?

  • For instance we have a textbox control in our website which lets user to enter his / her name than we crate a watermark effect in out textbox, now we displays the message in textbox control like “please enter your name” with some effect and color that is called watermark effect
  • Watermark saves out extra space in webpage

The code shown below adds the “watermark” behavior to controls marked with the ‘class=water’ attribute. When the user loads the page, a watermarked textbox displays a message to the user.

JQuery Code snippet

<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script> <!-- call jquery file or library into asp.net page --->

<script>
        $(document).ready(function() { // this is a function which is called by browser when it loads a webpage

            $(".water").each(function() { // each() function calls an unknown function by class name .water each time
                var $txtbox = $(this); // assign that class (.water) into TextBox
                if ($txtbox.val() != this.title) { // check if textbox value is (enter by user) not equal to title 
                    $txtbox.removeClass("water"); // remove water class from textbox
                }
            });

            $(".water").focus(function() { // focus() method triggered by water class
                var $txtbox = $(this);
                if ($txtbox.val() == this.title) {
                    $txtbox.val(""); // empty text box by val("") method
                    $txtbox.removeClass("water");
                }
            });

            $(".water").blur(function() { // blur() method called by water class
                var $txtbox = $(this);
                if ($.trim($txtbox.val()) == "") { // trim() function pass textBox value as a parameter and compare it with empty text
                    $txtbox.val(this.title); // set title text in textbox
                    $txtbox.addClass("water"); // add water class in textbox
                    }
            });

            });

    </script>

ASP.NET Code snippet

<!--- following code displays the textboxes and label on browser --->

<asp:Label runat="server" Text="TextBox Watermark Demo"></asp:Label>
        <br/> <br/>
        <asp:TextBox ID="TT_TextBox1" runat="server" class="water" Text="Enter your First Name" Tooltip="Enter your First Name" />
        <br/><br/>
        <asp:TextBox ID="TT_TextBox2" runat="server" class="water" Text="Enter your Last Name" Tooltip="Enter your Last Name" />






Posted in: ASP.NET, jQuery

Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .