Share Blog

Wednesday, May 14, 2014

How to create watermark Text for Textbox by using JavaScript

This is the simple demonstration in JavaScript how to create watermark text for textbox control. This requirement is the mostly used in web application.
Here the given codes to create the watermark text for textbox control.
For Example:
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 142px;
        }
    </style>
        <script language="javascript" type="text/javascript">
            function FuncWaterMark(TextBox1, event) {
                var strVal = "Enter EmailID Here";
                //Here to check textbox length and event type
                if (TextBox1.value.length == 0 & event.type == "blur") {
                    TextBox1.style.color = "Gray"; //setting text color
                    TextBox1.value = strVal; //setting default text in textbox
                }
                // Here to check textbox value and event type
                if (TextBox1.value == strVal & event.type == "focus") {
                    TextBox1.style.color = "black";
                    TextBox1.value = "";
                }
            }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <b>Customer ID:</b>
        <asp:TextBox ID="TextBox1" runat="server" Text="Enter Your Id " ForeColor="Gray"
            onblur="FuncWaterMark(this, event);" onfocus="FuncWaterMark(this, event);" />
    </div>
    </form>
</body>

</html>

No comments:

Post a Comment