Create watermark style to textbox with JQuery and CSS

No.of Views8897
Bookmarked18 times
Downloads 
Votes0
By  RRaveen   On  13 Nov 2010 00:11:55
Tag : JQuery , HTML and CSS
In this article, I will show you how to apply watermark style to textbox/input field with JQuery without using JQuery plug-in.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

In 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 Requisites

I 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

Implementation

Step 1

Let’s start to create a simple page with two textbox using visual studio 2008 as below. 

Design Output

Image Loading

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 2

Import 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 3

Let’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 4

Let’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. 

Image Loading

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 5

Write 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 Page

If 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

Image Loading

Live Demo

Watermark Live Demo

Conclusion

In 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

 
Sign Up to vote for this article
 
About Author
 
RRaveen
Occupation-Software Engineer
Company-TGS
Member Type-Gold
Location-Singapore
Joined date-03 Jun 2009
Home Page-codegain.com
Blog Page-www.codegain.com
- B.Sc. degree in Computer Science. - 4+ years experience in Visual C#.net and VB.net - Obsessed in OOP style design and programming. - Designing and developing Network security tools. - Designing and developing a client/server application for sharing files among users in a way other than FTP protocol. - Designing and implementing GSM gateway applications and bulk messaging. - Windows Mobile and Symbian Programming - Having knowledge with ERP solutions
 
 
Other popularSectionarticles
    The JQuery is powerful client side JavaScript library. Today I’m going to show you how to create cascading DropDownList using JQuery with JSON in ASP.NET.I hope you are all heard about cascading DropDownList and how to use with AJAX tool kit
    Published Date : 07/Dec/2010
    In this article I will demonstration to how to validate whether to check at least one checkbox is checked in the Gridview in ASP.NET using JQuery. The JQuery is significant library to manipulate client html and css with less line of code.Before Jquery come up we have used the pure JavaScript to implement this features. I will give the JavaScript code as well in end of this article.
    Published Date : 30/Dec/2010
    Today I have implemented to my project to check and uncheck all checkboxes within gridview in asp.net. So in this article we focus how to implement this features using JQuery with less code. And also I have given live demonstration as well you can try it in live.
    Published Date : 29/Dec/2010
    In this article, I will explain how to sort custom objects array using JQuery. Let’s say you have array with custom objects, the custom object has few attributes as well, so in this case, you may need to sort objects with different order with specific attributes.
    Published Date : 12/Jan/2011
    The JQuery is powerful library to manipulate client side HTML, CSS, object and etc. On this article I will explain how to sort element within array using JQuery. In this demonstration I will show sort for string and numeric elements.
    Published Date : 11/Jan/2011
Comments
By:maheswaranDate Of Posted:9/7/2012 4:07:48 AM
error in password text field
the password field will display the letter.we need to display the password dotted field
By:RRaveenDate Of Posted:12/3/2010 4:06:46 AM
Thank you Sinu
Hi Sinu, Thank you for your update, i have updated code work with master page as well. please check "With Master Page" section in article.
By:SinuDate Of Posted:12/3/2010 3:06:17 AM
watermark style to textbox with JQuery and CSS Problem with Master Pages
Thank you for ur great article. this was an excellent article when v integrate in a single web aspx page without master pages. When inheriting from a master page id of the text box in child pages changes. Also this code is not working. So please modify ur code to suit with this application. Thanks again.
By:RRaveenDate Of Posted:11/24/2010 3:13:53 AM
Thank you
Thank you for your comments.keep post your comments other authors as well.
By:Kui KuanDate Of Posted:11/13/2010 8:39:23 PM
Its great
Its nice job, live demo is good way to explain to readers.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top