Creating a watermark ("") textbox control

• Download source code - 1.4 KB

Introduction

This article shows the source code required to create a textbox control which will show a default string when no content is entered. This can be a useful feature when you need to guide a user in filling in the required data in a web form.

Typical uses of this control include showing "< enter your text here >" or "< search terms >" in gray in a search box in a web page.

The control shows the text when no content is entered, and removes the text when the control receives focus (when the textbox is selected by mouse or by pressing tab, in the onFocus event). When the control loses focus (in the onBlur event), when no text is entered, the watermark text is again inserted in the textbox.

Usage

Typical usage of this control is demonstrated here:

<%@ Register TagPrefix="WeSeeSc" 
  Namespace="We.See.Web.ServerControls" Assembly="ServerControls" %>

Search:
<WeSeeSc:WatermarkTextBox id="query" Runat="server" 
  Watermark="< enter your question >"></WeSeeSc:WatermarkTextBox></TD>