1. 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">

2. 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';

3. 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.

4. The last and final step is to implement the 2 functions that do the actual manipulation. So here they are :

5. 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);
   }
   }
   


6. function showDefaultText(objId,text)
   {
   try
   {
   var obj = document.getElementById(objId);
   if (obj != null && obj.value == "")
   {
   obj.value = text;
   }
   }
   catch (e)
   {
   alert(e.message);
   }
   }

So there you have it, simple text box watermarking. There are 2 improvements one can do on this implementation :

1. 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
2. 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