Applying a watermark to a Textbox in a Web Application

• Download source files (with demo project) - 16 Kb

Update History

Wednesday August 30, 2006: Patched the Single Quote bug. The library used to brake down when a single quote was supplied in WatermarkText

Wednesday August 23, 2006: Patched the library to work with FireFox. 

Introduction

You may have seen some web sites displaying watermarks in text boxes. As soon as you click on a text box, the watermark disappears and you can start entering text. In this article, I will explain a small JavaScript trick that you can use to do the same in your web application. I have included a library that you can use to achieve the same functionality without having to worry about JavaScript. 

Background

The idea is to capitalize on OnFocus and OnBlur events of the HTML input tag. The library sets flips between two styles for the input tag and, also, it checks if the default text has been changed or not.

Using the code

To use the code, you need to provide at least two styles for the text box. First that represents the watermarked textbox and another that represents a normal textbox. The sample project includes such a stylesheet.

To apply watermark to a textbox with id=textbox1, write the following in your page_load event handler. 

TextBoxWatermark.WaterMarkHelper.ApplyWaterMarkToTextBox(
                        textBox1, "Watermarktext", "WaterMarkedTextBoxStyle", "NormalTextBoxStyle")

Enhancements

You can enhance the library to intercept the submit event and remove the default text before required field validators fire.