Applying a watermark to a textbox in a Web Application

• Download source files (with demo project) - 7.33 KB

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 writing JavaScript code.

Background

The idea is to capitalize on the 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. One 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 the required field validators fire.

Update history

• August 30, 2006: Patched the single quote bug. The library used to break down when a single quote was supplied in WatermarkText.
• August 23, 2006: Patched the library to work with Firefox.