The TextBoxWatermark is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to get “watermark” behavior.

When a watermarked TextBox is empty, it displays a message to the user with a custom CSS style. Once the user has typed some text into the TextBox, the watermarked appearance goes away. The typical purpose of a watermark is to provide more information to the user about the TextBox itself without cluttering up the rest of the page.

This Extender is so easy to use, so simple you may end up using on every textbox.

We are going to show you a simple demonstration, with little to no CSS, you may style your textboxes however you’d like, you may change the watermark color and opacity.

First things let’s add New WebForm to this project and name it TextBoxWaterMark.aspx

As always add a ScriptManager to the page.

Add an UpdatePanel. Set the ID to UpdatePanel1

Add 2 TextBoxes and you can drag TextBox watermark extenders to the textboxes..

Add a Button and set the properties as well.

Set the TargetControls to the text boxes and the extender controls.

As you can see above we set a CSS rule for each text box, of UnwaterMarked and WaterMarked.
The TextBox watermark extender has very simple properties to set.

Below is the CSS we used for our boxes.

Now Load the WebPage in your browser and it should look something like this, depending on how you styled your TextBoxes.

Thank you for reading our tutorial on AJAX Controls, we aim to provide the best tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.

Download Source Files