How to make a Watermark TextBox in Asp.net

In this post i'll show you how we can make a Watermark TextBox Asp.Net.

We Can use Either a HTML TextBox or a Asp.Net TextBox Server Control and make it a Watermark TextBox.

Now a Watermark TextBox reacts as follows:

• If the Watermark TextBox gets focus, It's default text gets dissappeared making the textbox empty. 
• When the Watermark TextBox looses focus, If it contains any value, it will be displayed in the Textbox. If it doesn't contains any value, It will show the Default value.

Converting a Asp.Net Server Control to Watermark TextBox.

Firstly Drag and Drop a Asp.Net TextBox on to the Web Form and set its Text Property to the Default value that should be shown when the web page is rendered.

To make this kind of effect we can use two attributes of Textbox i.e. onfocus and onblur.
In the Form_Load Handler Type the following Code:

protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Attributes.Add("onfocus", "if(this.value=='Find...')value='';");
TextBox1.Attributes.Add("onblur", "if(this.value=='')value='Find...';");
}

It will Render the Asp.Net TextBox as a Watermark TextBox.

Converting a HTML Server Control to Watermark TextBox.

Firstly Drag and Drop a HTML TextBox on to the Web Form and set its value attribute to the Default value that should be shown when the web page is rendered.

To make this kind of effect we can use two attributes of HTML Textbox i.e. onfocus and onblur.
So, here are the attributes markup of the HTML Watermark TextBox. Just Set these three attributes in the Html Markup of your HTML Textbox control.

value="Find..."
onfocus="if(this.value=='Find...')value='';"
onblur="if(this.value=='')value='Find...';"


It will show a Watermark TextBox to the user.