|
Create a TextBoxWatermark Extender Functionality using ASP.NET and jQuery
|
|
Rating: 14 user(s) have rated this article
Posted by: Suprotim Agarwal,
on 12/10/2008,
in category "jQuery and ASP.NET"
Views: this article has been read 21925 times
Abstract: I had recently written an article Creating CollapsiblePanelExtender Functionality using ASP.NET and jQuery to use the ASP.NET and jQuery to create a functionality similar to that provided by the CollapsiblePanelExtender. In this article, I will show you how to create functionality similar to the TextBoxWatermark using jQuery with ASP.NET.
Create a TextBoxWatermark Extender Functionality using ASP.NET and jQuery
Open Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5 website’ from the templates > Choose your language (C# or VB) > Enter the location > Ok. In the Solution Explorer, right click your project > New Folder > rename the folder as ‘Scripts’.
Right click the Scripts folder > Add Existing Item > Browse to the path where you downloaded the jQuery library (jquery-1.2.6.js) and the intellisense documentation (jquery-1.2.6-vsdoc.js) > Select the files and click Add.
Now drag and drop the jquery-1.2.6.js file from the Solution Explorer on to your page to create a reference as shown below:
<head runat="server">
<title>TextBoxWatermarkUsingjQuery</title>
<style type="text/css">
.demoheading
{
padding-bottom:20px;
color:#5377A9;
font-family:Arial, Sans-Serif;
font-weight:bold;
font-size:1.5em;
}
.water
{
font-family: Tahoma, Arial, sans-serif;
font-size:75%;
color:gray;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demoheading">TextBoxWatermark Demonstration Using jQuery</div>
<asp:Label ID="lblFNm" runat="server" Text="First name:"></asp:Label>
<asp:TextBox ID="txtFNm" class="water" Text="Type your First Name" runat="server"></asp:TextBox><br />
<asp:Label ID="lblLNm" runat="server" Text="Last name:"></asp:Label>
<asp:TextBox ID="txtLNm" class="water" Text="Type your Last Name" runat="server"></asp:TextBox>
</form>
</body>
The final step is to add Watermark behavior to the TextBoxes. Use this jQuery script shown below to do so:
<script type="text/javascript">
$(document).ready(function() {
$(".water").focus(function() {
if ($(this).val() == this.defaultValue) {
$(this).val("");
}
});
$(".water").blur(function() {
if ($.trim($(this).val()) == "") {
$(this).val(this.defaultValue);
}
});
});
</script>
The jQuery above performs operations on controls marked with the ‘class=water’ attribute. If the textbox contains value and a user sets focus on it, the code empties the textbox. Similarly, if the user clicks on an empty textbox, the value is set back to the defaultValue, thereby creating a watermark effect. Simple, isn’t it! Run the application
At page load:
When the user clicks on the FirstName textbox
When the user clicks on the LastName textbox
The entire code is mentioned here for your reference: [Updated after the handy tip from Arnold Matusz]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TextBoxWaterMarkUsingjQuery.aspx.cs" Inherits="TextBoxWaterMarkUsingjQuery" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TextBoxWatermarkUsingjQuery</title>
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".water").focus(function() {
if ($(this).val() == this.title) {
$(this).val(""); $(this).removeClass("water");
}
});
$(".water").blur(function() {
if ($.trim($(this).val()) == "") {
$(this).val(this.title); $(this).addClass("water");
}
});
});
</script>
<style type="text/css">
.demoheading
{
padding-bottom:20px;
color:#5377A9;
font-family:Arial, Sans-Serif;
font-weight:bold;
font-size:1.5em;
}
.water
{
font-family: Tahoma, Arial, sans-serif;
font-size:75%;
color:gray;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demoheading">TextBoxWatermark Demonstration Using jQuery</div>
<asp:Label ID="lblFNm" runat="server" Text="First name:"></asp:Label>
<asp:TextBox ID="txtFNm" class="water" Text="Type your First Name" runat="server" Tooltip="Type your First Name"></asp:TextBox><br />
<asp:Label ID="lblLNm" runat="server" Text="Last name:"></asp:Label>
<asp:TextBox ID="txtLNm" class="water" Text="Type your Last Name" runat="server" Tooltip="Type your Last Name" ></asp:TextBox>
</form>
</body>
</html>
I am beginning to wonder what is it that can’t be done using jQuery..!
I hope you liked the article and I thank you for viewing it.