The jQuery library provides various options
to work with Textboxes, in this post Asp.net jQuery Textbox
set watermark, we shall see on how to loop through all
the textboxes in the page and set watermarks to all the textboxes in the page.
To set the Watermark effect, we need to set
the watermark text on page load, then we need to track the load, focus and blur
events to maintain the watermark effect based on the values in the textbox.
On Load: Set
the watermark effect to all the textboxes.
if ($(this).val() != $(this).attr('title'))
{
$(this).addClass("waterMark");
$(this).val($(this).attr('title'));
}
On Focus: If the value of the textbox is the same as the watermark, then empty the textbox and remove the watermark effect.
$(this).focus(function()
On Focus: If the value of the textbox is the same as the watermark, then empty the textbox and remove the watermark effect.
$(this).focus(function()
{
if ($(this).val() == $(this).attr('title'))
{
$(this).removeClass("waterMark");
$(this).val('');
}
});
On Blur: If
the value of the textbox is empty then set the watermark effect, else remove
the watermark effect.
$(this).blur(function()
$(this).blur(function()
{
if ($(this).val() == '')
{
$(this).addClass("waterMark");
$(this).val($(this).attr('title'));
}
else
{
$(this).removeClass("waterMark");
}
});
In the following example on clicking the set Watermark button, we will set the tooltip text of the TextBox as the watermark text.
I will be using the watermark class defined in the css file Stylesheet.css, define your own class to define your watermark effect.
Here is a full example
In the following example on clicking the set Watermark button, we will set the tooltip text of the TextBox as the watermark text.
I will be using the watermark class defined in the css file Stylesheet.css, define your own class to define your watermark effect.
Here is a full example
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<head runat="server">
<title>TextBox</title>
<link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
language="javascript">
$(document).ready(function()
{
$('#cmdWaterMark').click(function(event)
{
//
Disable Postback
event.preventDefault();
// Loop
Through textBoxes and Get Values
$('input[type="text"]').each(function()
{
if
($(this).val() != $(this).attr('title'))
{
$(this).addClass("waterMark");
$(this).val($(this).attr('title'));
}
//
$(this).focus(function()
{
if
($(this).val() == $(this).attr('title'))
{
$(this).removeClass("waterMark");
$(this).val('');
}
});
//
$(this).blur(function()
{
if
($(this).val() == '')
{
$(this).addClass("waterMark");
$(this).val($(this).attr('title'));
}
else
{
$(this).removeClass("waterMark");
}
});
});
});
});
</script>
</script>
</head>
<body>
<form id="frmTextBox" runat="server">
<div id="pageControls">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox
id="txtName"
runat="server"
MaxLength="100"
ToolTip="Enter Name"></asp:TextBox></td>
ToolTip="Enter Name"></asp:TextBox></td>
</tr>
<tr>
<td>Age</td>
<td><asp:TextBox
id="txtAge"
runat="server"
MaxLength="25"
ToolTip="Enter Age" ></asp:TextBox></td>
ToolTip="Enter Age" ></asp:TextBox></td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox
ID="txtAddress"
runat="server"
MaxLength="200"
ToolTip="Enter Address"></asp:TextBox></td>
ToolTip="Enter Address"></asp:TextBox></td>
</tr>
<tr>
<td>Phone</td>
<td><asp:TextBox
ID="txtPhone"
runat="server"
MaxLength="20"
ToolTip="Enter Phone"></asp:TextBox></td>
ToolTip="Enter Phone"></asp:TextBox></td>
</tr>
<tr>
<td>Email</td>
<td><asp:TextBox
ID="txtEmail"
runat="server"
MaxLength="30"
ToolTip="Enter Email"></asp:TextBox></td>
ToolTip="Enter Email"></asp:TextBox></td>
</tr>
<tr>
<td>Set Watermark</td>
<td><asp:Button
ID="cmdWaterMark"
runat="server"
Text="Set Watermark" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Run the application, click on the Set Watermark button, and notice that the watermark is set to all the textboxes in the page.
Related Posts
Asp.Net jQuery get Textbox Values
Asp.Net jQuery Textbox set ReadOnly
Asp.Net jQuery Textbox Remove ReadOnly
Asp.Net jQuery Textbox Disable
Asp.Net jQuery Textbox Enable
Asp.Net jQuery get Textbox Values
Asp.Net jQuery Textbox set ReadOnly
Asp.Net jQuery Textbox Remove ReadOnly
Asp.Net jQuery Textbox Disable
Asp.Net jQuery Textbox Enable
No comments:
Post a Comment