Reader Level:
ARTICLE

TextBox Watermark Effect in JavaScript

Posted by Mahak Gupta Articles | JavaScript June 22, 2011
In this article you will see TextBox Watermark Effect in JavaScript.
  • 0
  • 0
  • 22575


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

WaterMark1.gif

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
>


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

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

WaterMark3.gif

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
>

</head>
<
body>
    <form id="form1" runat="server">
    <div
>

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

    </div>
    </form
>
</body>
</
html>

COMMENT USING

Trending up