Now if you are working with ASP.NET then an easy way to do this is to use the AJAX Control Toolkit's 'TextboxWatermark' control and just link the AJAX control to the text box in which we want the watermark to appear. The AJAX control provides a number of options to control the watermark. However, if you are working with pure HTML pages then, you are stuck with Javascript and need to figure out a way to control the watermarking. I recently wrote some code to do the same and would like to share it in this post.
Assuming you have a html page added to your project, the following steps would enable the watermarking of the text box :
- The first step obviously is to define the basic HTML tag which will add a normal text box to your page. Here's a sample code for this :
<input id="txtUsername" name="txtUsername">
- The next step is to define a variable which will store the string that will act as the watermark (Thanks Pratik for sharing this best practice with me). The advantage of creating a variable is that it makes it easy to perform comparisons (which will be mentioned in a later step) and also requires you to change the watermark text in only one place.
var gcUsernameTbDefaultText='Please enter a username';
- The trick to have the watermark appear and disappear is to capture the 'onblur' and 'onfocus' events and manipulate the contents of the text box. The following code snippet shows functions being called for these 2 events.
<input type="text" id="txtUsername" name="txtUsername" onfocus="clearTextbox('txtUsername',gcUsernameTbDefaultText);" onblur="showDefaultText('txtUsername',gcUsernameTbDefaultText);" />
As you can see, the functions called when the events occur are passed the id of the text box on which the watermark is needed and also the watermark text, making these functions generic and usable with any text box.
- The last and final step is to implement the 2 functions that do the actual manipulation. So here they are :
- function clearTextbox(objId,text)
{
try
{
var obj = document.getElementById(objId);
//Clear the textbox only if the textbox contains the original default value
if (obj != null && obj.value.toString().toLowerCase() == text.toLowerCase())
{
obj.value = "";
}
}
catch (e)
{
alert(e.message);
}
} - function showDefaultText(objId,text)
{
try
{
var obj = document.getElementById(objId);
if (obj != null && obj.value == "")
{
obj.value = text;
}
}
catch (e)
{
alert(e.message);
}
}
- function clearTextbox(objId,text)
So there you have it, simple text box watermarking. There are 2 improvements one can do on this implementation :
- Dynamically apply styles in order to show the watermark text in gray, with some sort of transparency and have the normal text with normal appearance
- This approach won't work with 'password' text boxes since even the watermark will appear as asterisks. This post talks about implementing watermarks for password text boxes
