Watermark Effect Using jQuery

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.

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.

Step 3: From where you have to add the reference to the head section

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.

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

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.

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.

Step 8: In this step we have to combined all the code inside the source code of the default.aspx page.