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

Using Watermark Functionality in Textbox by JQuery.


JQuery JQuery 
Ratings:
1 Comment(s)
 7566  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.


Thanks..

By Sunil Singh on   27 days ago

Thanks for sharing informative post.


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

Follow MindStick