In this article I will explain how to Watermark ASP.Net TextBoxes in SingleLine, MultiLine and Password using jQuery Watermark plugin.
 
 
HTML Markup
In the below HTML Markup I have ASP.Net TextBoxes with different TextMode i.e. SingleLine, MultiLine and Password i.e. Normal TextBox, TextArea and Password fields. You will notice that I have set ToolTip property of the TextBox, the text in the ToolTip property will be displayed as the Watermark text.
UserName:
<asp:TextBox ID="txtUserName" runat="server" ToolTip="Enter UserName"></asp:TextBox><br />
Password:
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" ToolTip="Enter Password"></asp:TextBox><br />
Email:
<asp:TextBox ID="txtEmail" runat="server" ToolTip="Enter Email"></asp:TextBox><br />
Details:
<asp:TextBox ID="txtDetails" runat="server" TextMode="MultiLine" ToolTip="Enter Details"></asp:TextBox>
 
 
Applying Watermark to ASP.Net TextBoxes
I have built the jQuery Watermark plugin to apply Watermark to all types of ASP.Net TextBoxes i.e. SingleLine, MultiLine and Password.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="WaterMark.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
          $("[id*=txtUserName], [id*=txtPassword], [id*=txtDetails]").WaterMark();
 
          //To change the color of Watermark              
          $("[id*=Email]").WaterMark({
             WaterMarkTextColor: '#000'
          });
        });
</script>
 
The Watermark jQuery plugin has an optional property WaterMarkTextColor which can be used to set the color of the Watermark text.
The complete page HTML markup is provided below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="WaterMark.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=txtUserName], [id*=txtPassword], [id*=txtDetails]").WaterMark();
 
            //To change the color of Watermark 
            $("[id*=Email]").WaterMark({
                WaterMarkTextColor: '#000'
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    UserName:
    <asp:TextBox ID="txtUserName" runat="server" ToolTip="Enter UserName"></asp:TextBox><br />
    Password:
    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" ToolTip="Enter Password"></asp:TextBox><br />
    Email:
    <asp:TextBox ID="txtEmail" runat="server" ToolTip="Enter Email"></asp:TextBox><br />
    Details:
    <asp:TextBox ID="txtDetails" runat="server" TextMode="MultiLine" ToolTip="Enter Details"></asp:TextBox>
    </form>
</body>
</html>
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads