IntroductionIn this article, I will show you how to apply watermark style to textbox/input field with JQuery without using JQuery plug-in. .Because I don’t like JQuery plug-ins sometimes it’s may be overhead. Pre RequisitesI hope you are all known about JQuery and purpose. If you are not familiar you can find cool resource for JQuery below. And the JQuery library, you can download latest from http://jquery.com/. If you don’t to download JQuery from above link, you can use from the Google or JQuery web site. Below links, 1. http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
2. http://code.jquery.com/latest/ jquery.min.js ImplementationStep 1Let’s start to create a simple page with two textbox using visual studio 2008 as below. Design Output HTML Code <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="2" width="250px" style="border:solid 1px gray;" cellspacing="2">
<tr>
<td colspan="3" align="center">
<b>Welcome to Signin</b>
</td>
</tr>
<tr>
<td colspan="3" style="height: 5px;">
</td>
</tr>
<tr>
<td>
User Name
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtusername" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtpass" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="3" style="height: 5px;">
</td>
</tr>
<tr>
<td colspan="3" align="right">
<asp:Button ID="btnSign" runat="server" Text="Sign In" />
</td>
</tr>
</table>
</form>
</body>
</html>
The above login is screen is very simple screen has two input field with one button. Now I’m going to work for display water mark for both input fields. To that we have to import JQuery library and then have to write a simple CSS to apply for water mark with JQuery. Step 2Import JQuery library from Google under the HEAD section, like below <head runat="server">
<title>The Watermark Demonstration</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
</head>
Step 3Let’s create a simple style to apply watermark effect to username and password textbox. <head runat="server">
<title></title>
<style type="text/css">
.watermarkOn
{
color: #CCCCCC;
font:Verdana normal 10px;
}
</style>
</head>
Note: When you are work real world web application down write your style sheet within the page. Its increase your page size and Browser does NOT cache your CSS. So better to write as separate CSS file and import in your into your page. Step 4Let’s apply the default style effect to textbox. Because when user does not focus the input field, we have to show the watermark, if focused, we have to clear style. Html Code <tr>
<td>
User Name
</td>
<td>
:
</td>
<td>
<asp:TextBox CssClass="watermarkOn" Text="UserName" ID="txtusername" runat="server"></asp:TextBox>
</td>
</tr>
In above snippets, I have applied the default watermarkon style and default text for the user name input field. Apply same to password input field as well. Step 5Write few line of JavaScript code to ingrate style and JQuery as like below, <script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#txtusername").focus(function() {
$(this).filter(function() {return $(this).val() == "" || $(this).val() == "UserName"}).removeClass("watermarkOn").val("");
});
$("#txtusername").blur(function() {
$(this).filter(function() {return $(this).val() == ""}).addClass("watermarkOn").val("UserName");
});
$("#txtpass").focus(function() {
$(this).filter(function() {return $(this).val() == "" || $(this).val() == "Password"}).removeClass("watermarkOn").val("");
});
$("#txtpass").blur(function() {
$(this).filter(function() {return $(this).val() == ""}).addClass("watermarkOn").val("Password");
});
});
</script>
In above code line, I just apply style and remove for two events. When user focus input field, remove style class. .removeClass("watermarkOn").val("");As like within in the onblur event, add stlye again to inout field. .addClass("watermarkOn").val("UserName");Note: When we are adding watermark style, we have to add default text to input filed.
Let’s run application. output will be like follow, With Master PageIf you are use the master page above code does not work,beuase when we are use the master page ASP.NET add prefix to all server controls ct100_.... so we have to modify the code work to all situation. <script language="javascript" type="text/javascript">
$(document).ready(function() {
$("[id$=txtusername]").focus(function() {
$(this).filter(function() {
return $(this).val() == "" || $(this).val() == "UserName"
}).removeClass("watermarkOn").val("");
});
$("[id$=txtusername]").blur(function() {
$(this).filter(function() {
return $(this).val() == ""
}).addClass("watermarkOn").val("UserName");
});
$("[id$=txtpass]").focus(function() {
$(this).filter(function() {
return $(this).val() == "" || $(this).val() == "Password"
}).removeClass("watermarkOn").val("");
});
$("[id$=txtpass]").blur(function() {
$(this).filter(function() {
return $(this).val() == ""
}).addClass("watermarkOn").val("Password");
});
});
</script>If you are going to apply watermark style with master,please use the above code. Output Live DemoWatermark Live Demo ConclusionIn this article I have explained, how to apply water mark effect to input filed with JQuery and CSS. With this article attached sample project, you can customize the style as you need. Download Sample Project Download source files -3 kb |