Home > DeveloperSection > Articles > How to create watermark Text for Textbox by using JavaScript

How to create watermark Text for Textbox by using JavaScript


ASP.Net ASP.Net 
Ratings:
0 Comment(s)
 10758  View(s)
Rate this:

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>Sample for Watermark Text Using JavaScript</title>

    <script language="javascript" type="text/javascript">

        function FuncWaterMark(txtEmail, event) {

            var strVal = "Enter EmailID Here";

            //Here to check textbox length and event type

            if (txtEmail.value.length == 0 & event.type == "blur") {

                txtEmail.style.color = "Gray";//setting text color

                txtEmail.value = strVal; //setting default text in textbox

            }

            // Here to check textbox value and event type

            if (txtEmail.value == strVal & event.type == "focus") {

                txtEmail.style.color = "black";

                txtEmail.value = "";

            }

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <b>Email ID:</b>

        <asp:TextBox ID="txtEmailID" runat="server" Text="Enter EmailID Here" ForeColor="Gray"

            onblur="FuncWaterMark(this, event);" onfocus="FuncWaterMark(this, event);" />

    </div>

    </form>

</body>

</html>

 

Output:

How to create watermark Text for Textbox by using JavaScript


Don't want to miss updates? Please click the below button!

Follow MindStick