In this article I will explain how to solve the issue that ASP.Net AJAX Control Tookit WaterMarkExtender control does not work for TextBox with TextMode Password.
To solve this issue I have built a jQuery WaterMark plugin which can set Watermark text to 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>
Demo
Downloads
