Introduction: In this article we will
discuss how to add or create a watermark effect by using jQuery to the
ASP.NET control. As we know, a water mark effect means having some fade
color of the text in the textbox. By taking a textbox we will add that effect of
the water mark to that. Let see how to get a water mark effect by using jQuery.
In this article if we will click to the textbox to write something in it then we
will see that the water mark color effect will disappear and if we click on the other textbox to write something then the water mark effect will be appeared
automatically with in the textbox. Similarly when the user moves focus to a
different control without entering a value in the textbox, we add the watermark css again. There are some steps how to make a water mark
effect using jQuery then you will have to follow these steps.
Let's start the application project to make a web service.
Step 1: Firstly we have to create a web Application
- Go to Visual Studio 2010
- Create the web Application
- Click OK.
![Website Application]()
Step 2: Secondly you have to add a new
page to the website.
- Go to the Solution Explorer.
- Right Click on Project name.
- Select add new item.
- Add new web page and give it a name.
- Click OK.
![Solution Explorer]()
![Web Form]()
Step 3: From where you have to add the
reference to the head section
![JQuery references]()
Step 4: Now we have to build a style
sheet which is shown below it should be added to the Head section of the
default.aspx page.
![Add Style Sheet]()
Description: In the above code we are
just set the style in which we are making two classes by adding dot sign before
the class name which is as div and w_effect which is used to add the water effect to the textbox.
Step 5: Now we will write the jQuery
code which will allow that it may focus on that textbox
![JQuery for remove]()
Description:
In the above code we are using the focus() method
which will allow you that if you will click on the textbox then it will remove
the css class and you are able to write anything inside the textbox.
Step 6: Now again in this step we will
write the code for jQuery to blur the text on the textbox.
![JQuery for adding effect]()
Description: In the above code we are
using the blur() method which will allow to Similarly when the user moves focus
to a different control without entering a value in the textbox, we add the
watermark css again. it will add the css class if you are not writing anything
inside the textbox it will added css class again to the textbox.
Step 7: Now in this step we have to
combined both the jQuery code inside the script which is given below it can
placed in head or body section both.
![Combined both Query]()
Step 8: In this step we have to combined
all the code inside the source code of the default.aspx page.
Code:
<%@
Page Language="C#"
AutoEventWireup="true"
CodeFile="Default2.aspx.cs"
Inherits="Default2"
%>
<!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>Watermark
textbox</title>
<script
type="text/javascript"
src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script
type="text/javascript"
src="Scripts/jquery-1.4.1.js"></script>
<script
type="text/javascript"
src="Scripts/jquery-1.4.1.min.js"></script>
<script
type="text/javascript">
$(document).ready(function () {
$(".w_effect").focus(function
() {
if ($(this).val()
== this.title) {
$(this).val("");
$(this).removeClass("w_effect");
}
});
$(".w_effect").blur(function () {
if ($.trim($(this).val())
== "") {
$(this).val(this.title);
$(this).addClass("w_effect");
}
});
});
</script>
<style
type="text/css">
.div
{
padding-bottom:20px;
color:Fuchsia;
font-family:Arial,
Sans-Serif;
font-weight:bold;
font-size:1.5em;
}
.w_effect
{
font-family:
Tahoma, Arial,
sans-serif;
font-size:75%;
color:gray;
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<div
class="div">Watermark
Effect Using jQuery</div>
<asp:Label
ID="lbl1"
runat="server"
Text="Email ID:"
Font-Names="Comic Sans
MS"></asp:Label>
<asp:TextBox
ID="txt1"
class="w_effect"
Text="Type your Email
Id" runat="server"
Tooltip="Type your Email
Id"></asp:TextBox><br
/>
<asp:Label
ID="lbl2"
runat="server"
Text="Password: "
Font-Names="Comic Sans
MS"></asp:Label>
<asp:TextBox
ID="txt2"
class="w_effect"
Text="Type your
Password" runat="server"
Tooltip="Type your
Password" ></asp:TextBox>
</form>
</body>
</html>
Step 9: Here we will see the
design page which is a design before run default2.aspx page
![Untitled-2.gif]()
Step 10: In this step we have to run the
default2.aspx page by pressing F5.
Output 1: In this output we will see
that the water mark effect will be disappeared whenever we click on the textbox.
![Output1]()
Output 2: In this output we will see
that the water mark effect has been enabled if we are clicking on next textbox
and disappeared in the current textbox.
![Output2]()