Articles → JQUERY → Watermark Textbox Using Jquery

Watermark Textbox Using Jquery

JQuery is cross browser JavaScript library that makes the client side scripting for any web application easy. There are so many things which a developer can do using JQuery to make the web application rich and easy to use.

In this tutorial I will explain how to create textbox watermark in HTML using jQuery.

Steps Of Implementation

Create a simple HTML file.

<html><head><title>TextBox WaterMark</title></head><body></body></html>

This code is quite simple if you have a hands on experience on HTML then you can easily see that this is the basic code for the HTML file.

Next step is to add a form tag and a textbox.

<form id="form1" runat="server"><input type="text" id="txtName" /></form>

To use JQuery in your HTML file or in any web application you have to import the js file. You can do that in 2 ways first you can download the file and give the path of the file using the script tag like

<script src="Script/jquery-latest.js" type="text/javascript"></script>

Or you can directly give the URL of the JS file where the file is stored on the server

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

You can use any of the method, both will work fine.

Add 2 CSS classes

<style type="text/css">
.water {
	font-family: Verdana;
	color: gray;
	width: 200px;
}

.nowater {
	font-family: Verdana;
	color: black;
	width: 200px;
}
</style>

In the above code I have created a style tag and inside it I have created 2 classes one is water and other is nowater. The purpose of nowater style to show normal text in the textbox and the purpose of water style is to show watermark text in the textbox. You can change the color of text in water class as per the requirement.

Add attributes in the textbox

<input type="text" id="txtName" class="water" value="Type Email Id Here" title="Type Email Id Here" />

In the above code I have added three attributes in the textbox i.e. class, value and title.

The purpose of class attribute is to apply style of class water to the textbox so when the page is loaded then you can see water mark text in the textbox.

Second attribute is value. This is the text which you want to show as watermarked text in the textbox.

Third attribute is title. If you set this attribute then it will show the tooltip when you put cursor over the textbox. There is one purpose of adding the attribute, when the user clicks on the textbox and write something then how can you identify which watermark text you should put in the textbox once the textbox will be blank. You will come to know more about it when I use the title in JQuery code.

Add JQuery ready method

<script type="text/javascript">
       $(document).ready(function() {});
</script>

Here I am not going to explain the purpose of this method. If you are familiar with JQuery then you know the purpose of this code.

Add focus function

$("#txtName").focus(function() {
	if(($("#txtName")).attr('class') == "water") { // (a)
		$("#txtName").val(""); // (b)
		$("#txtName").removeClass("water"); // C
		$("#txtName").addClass("nowater"); // (d)
	}
});

This is the textbox focus function i.e. what all things should be done when the user clicks on the textbox to write something.

The first line of code checks whether the class of the textbox is water or not. This condition will happen when the page is loaded for the first time or if the user have not entered any text into the textbox.
The second line of code set the text to blank if you are not making the textbox blank then when you click on the textbox the water mark text will be there.
In the third point you are removing the class attribute of the textbox, because if you will not remove the class so when the user starts typing the text in the textbox it will show the text in gray color.
Add nowater class in the textbox to show normal text in the textbox.

Add a blur function

$("#txtName").blur(function() {
	if($.trim($("#txtName").val()) == "") { //(a)
		$("#txtName").val(this.title); //(b)
		$("#txtName").removeClass("nowater"); // C
		$("#txtName").addClass("water"); // (d)
	}
});

This event will invoke when the user clicks anywhere outside the textbox or press tab when the focus is on the textbox.

In this line of code we are checking if there is any text entered by the user. If there will be no text then it means that we have to write water mark text.
Set the title as text of the textbox, the point which I was discussing earlier. The title acts as a storage of the watermark text which we can retrieve later whenever we want.
If there is no text in the textbox then remove the nowater class.
Add water class.

Code

<html><head><title>TextBox WaterMark</title><script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script><style type="text/css">
        .water
        {
            font-family: Verdana;
            color: gray;
            width: 200px;
        }
        .nowater
        {
            font-family: Verdana;
            color: black;
            width: 200px;
        }
    </style><script type="text/javascript">
        $(document).ready(function() {

            $("#txtName").focus(function() {
            if (($("#txtName")).attr('class') == "water") {
                $("#txtName").val("");
                $("#txtName").removeClass("water");
                $("#txtName").addClass("nowater");
                }
            });

            $("#txtName").blur(function() {
            if ($.trim($("#txtName").val()) == "") {
                $("#txtName").val(this.title);
                $("#txtName").removeClass("nowater");
                $("#txtName").addClass("water");
                }
            });
        });


 
    </script></head><body><form id="form1" runat="server"><div><input type="text" id="txtName" class="water" value="Type Email Id Here" title="Type Email Id Here" /></div></form></body></html>

Demo

Posted By -	Karan Gupta

Posted On -	Tuesday, August 9, 2011

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**