TextBox Watermark Effect in JavaScript

Mahak Gupta
Jun 23, 2011
33.8k
0
0
Article

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

Step 2:

<input id="txtname" type="text" value="Enter your name here"   onblur="ShowName()" />
<input id="txtage" type="text" value="Enter your age here" onblur="ShowAge()" /></td>

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():

<script language="JavaScript" type="text/javascript" >
            function ShowName() {
                var n = document.getElementById('txtname').value;

                if (n == "") {
                    document.getElementById('txtname').value = "Enter your name here";
                }
            }
            function ShowAge() {
                var a = document.getElementById('txtage').value;
                if (a == "") {
                    document.getElementById('txtage').value = "Enter your age Here ";
                }
            }
           </script>

Complete Program:

<head runat="server">
    <title></title>

        <script language="JavaScript" type="text/javascript" >
            function ShowName() {
                var n = document.getElementById('txtname').value;

                if (n == "") {
                    document.getElementById('txtname').value = "Enter your name here";
               }
            }
            function ShowAge() {
                var a = document.getElementById('txtage').value;
                if (a == "") {
                    document.getElementById('txtage').value = "Enter your age Here ";
                }
            }
           </script>