In this article I will explain with an example, how to display default Text Label in TextBox using jQuery in ASP.Net.
The process to display default Text Label in TextBox is known as Watermarking.
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
