In this article I will explain with an example, how to solve ASP.Net AJAX WaterMarkExtender not working for TextBox with TextMode Password.
HTML Markup
The HTML Markup consists of following controls:
TextBox: For capturing the values of UserName, Password, Email, Details.
TextBox has the following property.
ToolTip: It is a property for display Watermark text.
TextMode: Specifying the behavior mode of the TextBox.
<table>
<tr>
<td>UserName:</td>
<td><asp:TextBox ID="txtUserName" runat="server" ToolTip="Enter UserName"></asp:TextBox></td>
</tr>
<tr>
<td>Password:</td>
<td><asp:TextBox ID="txtPassword" runat="server" TextMode="Password" ToolTip="Enter Password"></asp:TextBox></td>
</tr>
<tr>
<td>Email:</td>
<td><asp:TextBox ID="txtEmail" runat="server" ToolTip="Enter Email"></asp:TextBox></td>
</tr>
<tr>
<td>Details:</td>
<td><asp:TextBox ID="txtDetails" runat="server" TextMode="MultiLine" ToolTip="Enter Details"></asp:TextBox></td>
</tr>
</table>
Applying Watermark to ASP.Net TextBoxes
Inside the Html Markup the following Script files are inherited.
1. jQuery.min.js
2. WaterMark.im.js
Inside the
jQuery document ready event handler, the TextBoxes have been assigned with
WaterMark plugin.
The Watermark
jQuery plugin has following properties:
WaterMarkTextColor – For setting the color of the Watermark text.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/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>
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
