Home > DeveloperSection > Blogs > Using Watermark Functionality in Textbox by JQuery.

Using Watermark Functionality in Textbox by JQuery.


JQuery JQuery 
Ratings:
0 Comment(s)
 7082  View(s)
Rate this:


Using Watermark Functionality in Textbox by JQuery

A watermark refers to text or a graphic that appears behind text. It shows the real value putting in textbox to tell the user.

How we implement the watermark text


Step 1: Firstly we download the file “jquery-1.4.4.min.js” from http://docs.jquery.com/Downloading_jQuery. And include in head section.

Step2: Using this css for displaying watermark text
.watermarkText

{

    color: silver;

    font-style: italic;

}
Step3: Using Java Script code in head section as

<script>
$(document).ready(function() {

    // Define what happens when the textbox comes under focus

    // Remove the watermark class and clear the box

   $("#txtName").focus(function() {

        $(this).filter(function() {

            // We only want this to apply if there's not

            // something actually entered

        return $(this).val() == "" || $(this).val() == "User Name"

        }).removeClass("watermarkText ").val("");

    });

    // Define what happens when the textbox loses focus

    // Add the watermark class and default text

    $("#txtName").blur(function() {

        $(this).filter(function() {

            // We only want this to apply if there's not

            // something actually entered

            return $(this).val() == ""

        }).addClass("watermarkText").val("User Name");

    });

});

</script>

Step4: Using textbox control within form tag
<asp:TextBox ID="txtName" runat="server" CssClass="watermarkText" value="User Name"></asp:TextBox>

Check this simple code for using watermark functionality in textbox.


Don't want to miss updates? Please click the below button!

Follow MindStick