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">
      color: Gray;

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") 
      }).blur(function() { 
         if ($(this).val() == '') 
         $(this).addClass("watermark").val("Type here"); 





About author

User avatar

Waqas Anwar

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