TextBox watermark using javascript

Suthish Nair
14y
5.7k
0
0

Blog

Here is the code snippet.

<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function watermark() { 
            if(document.getElementById('<%=TextBox1.ClientID%>').value == 'Enter FirstName') 
            {
             document.getElementById('<%=TextBox1.ClientID%>').value = '';
             document.getElementById('<%=TextBox1.ClientID%>').style.backgroundColor = '#FFFFFF';
            }
     }
     function watermark1() {
         if (document.getElementById('<%=TextBox1.ClientID%>').value == '') {
             document.getElementById('<%=TextBox1.ClientID%>').value = 'Enter FirstName';
             document.getElementById('<%=TextBox1.ClientID%>').style.backgroundColor = '#FFFF99';
         }
     }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" BackColor="#FFFF99" Text="Enter FirstName"></asp:TextBox>
        </div>
    </form>
</body>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  TextBox1.Attributes.Add("onfocus", "watermark();")
  TextBox1.Attributes.Add("onfocusout", "watermark1();")
End Sub

You can also use onblur instead of onfocusout.