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:


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.


Comments have been disabled for this content.