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 theToolTip 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 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><br />
form>
body>
html>
Demo
Downloads
The above code has been tested in the following browsers
No comments:
Post a Comment