Textbox Water Mark in ASP.Net

Introduction

This article explains how to create a watermark in a TextBox using JavaScript and also with Ajax. To do that you can use the following procedure.

Step 1

Download the Ajax control toolkit from link.

Step 2

Right-click on the standard toolbox then select the "Add" tab, provide the name of the tab.



Step 3

Right-click on the new tab then choose "items" then click on the "Browse" button and browse to "AjaxControlToolLit.dll". Then click on the "OK" button.

Step 4

Right-click in the Solution Explorer then select "Add reference" then browse to "AjaxControlToolLit.dll". Then click on the "OK" button.

Step 5

Drag the "ToolKitScriptManager" on the top of your aspx page from the new tab controls.

Step 6

Then drag the "TextBoxWatermarkExtender".

Step 7

Set the TextBoxWatermarkExtender properties TargetControlID=" ", WatermarkText=" ". The "TargetControlID" property specifies the TextBox id, on which you want to set the watermark text, and "WatermarkText" accepts the text as watermark for that TextBox.

Code for TextBoxWatermarkExtender

Full Source code

Step 8

Output




If you do not want to do so much then just use the simple sample JavaScript code, which is described below. That JavaScript code provides you the same functionality that you have done before and can enjoy it with less work and quicker improved code.

Now for how to watermark a TextBox using JavaScript.

JavaScript Code

The given following scriptuses the "onblur" and "onfocus" events of the TextBox. The scripts have two checks; the first one check if the TextBox is empty and if the "blur" event is set then the water mark is done the same as you when assign the TextBox text manually using "document.getElementById(txtcontrol)" and changes the font color to "red", and the first check is that when the TextBox text matches the default text and the event type is focus then it clears the TextBox and sets the font color to black.