How to Create Textbox Watermark in JQuery


You have a textbox and you want to implement watermark (placeholder) effect on it. You can use following technique.

First you need a CSS class for changing the watermark text color to gray.

<style type="text/css">
   .watermark
   {
      color: Gray;
   }
</style>

This is the ASP.NET textbox you want to use. Remember, You can also use simple HTML input textbox if you are not using ASP.NET.

<asp:TextBox ID="TextBox1" runat="server" Text="Type here" CssClass="watermark"></asp:TextBox>

Here is the JQuery code to implement Textbox Watermark

<script type="text/javascript"> 

   $(document).ready(function() { 

      $("#TextBox1").focus(function() { 
         if ($(this).val() == "Type here") 
            $(this).removeClass("watermark").val(''); 
      }).blur(function() { 
         if ($(this).val() == '') 
         $(this).addClass("watermark").val("Type here"); 
      }); 

   }); 

</script>

 

 

About author


User avatar

Waqas Anwar

Founder of EzzyLearning.com, Senior Consultant, Microsoft .NET and Web Technologies

Comments