Step 1: Here we create a simple example of a TextBox Watermark Effect. There are two TextBoxes (txtname, txtage) in our example.

WaterMark1.gif

Step 2:
  1. <input id="txtname" type="text" value="Enter your name here" onblur="ShowName()" />
  2. <input id="txtage" type="text" value="Enter your age here" onblur="ShowAge()" /></td><input id="txtname" type="text" value="Enter your name here" onblur="ShowName()" />
  3. <input id="txtage" type="text" value="Enter your age here" onblur="ShowAge()" /></td>
WaterMark2.gif

Here we call two functions ShowName() and ShowAge(). These functions are useful as they check the value of the TextBox and if the TextBox has a value it will set it as TextBox value otherwise it will set the default value ("Enter your name Here" or "Enter your age here").

Step 3: Now we declare the JavaScript functions ShowName() and ShowAge():
  1. <script language="JavaScript" type="text/javascript" >
  2. function ShowName() {
  3. var n = document.getElementById('txtname').value;
  6. if (n == "") {
  7. document.getElementById('txtname').value = "Enter your name here";
  8. }
  9. }
  10. function ShowAge() {
  11. var a = document.getElementById('txtage').value;
  12. if (a == "") {
  13. document.getElementById('txtage').value = "Enter your age Here ";
  14. }
  15. }
  16. </script>
WaterMark3.gif

Complete Program
  1. <head runat="server">
  2. <title></title>
  4. <script language="JavaScript" type="text/javascript" >
  5. function ShowName() {
  6. var n = document.getElementById('txtname').value;
  7. if (n == "") {
  8. document.getElementById('txtname').value = "Enter your name here";
  9. }
  10. }
  11. function ShowAge() {
  12. var a = document.getElementById('txtage').value;
  13. if (a == "") {
  14. document.getElementById('txtage').value = "Enter your age Here ";
  15. }
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <form id="form1" runat="server">
  21. <div>
  22. <table >
  23. <tr>
  24. <td>
  25. Name</td>
  26. <td>
  27. <input id="txtname" type="text" value="Enter your name here" onblur="ShowName()" /></td>
  28. </tr>
  29. <tr>
  30. <td >
  31. Age</td>
  32. <td>
  33. <input id="txtage" type="text" value="Enter your age here" onblur="ShowAge()" /></td>
  34. </tr>
  35. </table>
  36. </div>
  37. </form>
  38. </body>
  39. </html>