Karan's Blog

Just Microsoft .Net

jQuery Watermark

This simple to use jQuery plugin adds watermark capability to a textbox. You can download this jQuery plugin from the following link: http://code.google.com/p/jquery-watermark/

Here is the code for using this plugin:

   1: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
   2:       <script src="Scripts/jquery.watermark.min.js" type="text/javascript"></script>
   3:       <script type="text/javascript">
   4:           $(document).ready(function () {
   5:               $('#<%=txtInputBox.ClientID %>').watermark('Watermarked Text', { className: 'watermark' });
   6:             });
   7:          });
   8:      </script>
   9:      <style type="text/css">
  10:            .watermark {
  11:               color: #999;
  12:            }
  13:        </style>
   1: <asp:TextBox ID="txtInputBox" runat="server" />

It’s  very simple to use this plugin. With a single line as shown above (No 5 in the Javascript) you could add a watermark to your textbox. Here in the above code I am also passing an additional parameter which is the class name which basically controls how you want your text to appear. The output of the above code is shown below:

image 

If you want to remove the watermark when you click the textbox you could use the following code:

   1: $('#<%=txtInputBox.ClientID %>').mousedown(function () {
   2:    $.watermark.hide($('#<%=txtInputBox.ClientID %>'));
   3: });

Hope this post was helpful.

Posted: Oct 26 2010, 10:48 PM by karan@dotnet | with 3 comment(s) |
Filed under: ,

Comments

rebexit said:

Does it support image watermark?

# October 26, 2010 11:43 PM

karan@dotnet said:

I haven't tested this but found out this which might be helpful to you:

www.sohtanaka.com/.../protect-your-images-with-css-watermarks

# October 27, 2010 9:48 AM

Naveen Jose said:

Hi Karan,

Nice article.

Check this out too.

davidwalsh.name/html5-placeholder

# December 22, 2010 1:26 AM

weblogs.asp.net said:

Jquery watermark.. Slap-up :)

# March 31, 2011 3:37 PM

Tuan said:

Nice article, thanks

# August 22, 2011 12:10 AM