Post
Ask Question

TextBox Watermark Effect in JavaScript

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;  
  4.    
  5.    
  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>  
  3.    
  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> 


Similar Articles