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:
    
No comments:
Post a Comment