How to Set Watermark in TextBox in Asp.Net Using JavaScript

In this Example we will See a Watermarks in Textbox Using JavaScript. Create Webpage and Drag and Drop Textbox Controls in Webpage.

<div>

  <asp:TextBox ID="txtUserId" runat="server" onfocus="Focus(this.id,'Password')" onblur="Blur(this.id,'Password')" Width="201px" CssClass="WaterMarkedTextBox" Text="Password" Height="27px"></asp:TextBox>

</div>

 

Now assign Some Style for textbox. Now Create Script for Generate Watermarks on Textbox.

StyleSheet Code:

<style type="text/css">

        .WaterMarkedTextBox

        {

            padding: 2px 2 2 2px;

            border: 1px solid #BEBEBE;

            background-color: #F0F8FF;

            color: gray;

            font-size: 8pt;

            text-align: left;

        }

</style>

JavaScript Code:

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

        function Focus(objname, waterMarkText) {

            obj = document.getElementById(objname);

            obj.value = "";

            if (obj.value == waterMarkText) {

                obj.value = "";

                obj.className = "WaterMarkedTextBox";

 if (obj.value == "User Name" || obj.value == "" || obj.value == null)

  {

                    obj.style.color = "gray";

                }

            }

        }

        function Blur(objname, waterMarkText) {

            obj = document.getElementById(objname);

            if (obj.value == "") {

                obj.value = waterMarkText;

                obj.className = "WaterMarkedTextBox";

                obj.style.color = "gray";

            }

        }

</script>

Now Run Your Webpage and See Watermarks Text Will be on Textbox Control in Browser.

Author : Umesh Patel

Related Posts