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.