How to Create Show, hide Text of TextBox in ASP.Net-Example

Description:

So many applications create like this example. When we go for the login or enter text then the Text of the text box will hide and set the value of the text box null. Again when we mouse out then again the Text Box will show the Text. I explain it very carefully. Follow all the steps:

 

Step1:

Open the Visual studio--à go to File -à then New -à Website -à ASP.NET Empty Website

Go to the Solution explorer and right click on the project

  

Then edit the page name then click OK.

Step2:

Take two Text Box and a Button from Tool Box and create a page like this. You can change the name of text boxes and the Button. I am not changing names so that understand very easily.

Set Border Color, Border Style and Border Width from Properties for good looks of the Text box and Buttons .

Now Set Text Properties of first Text Box “User Name” and For Second text box “Password” as I set first

Now the page Looks Like 

 

Step3:

Now your design part is done. Now you have to write some JavaScript code.

Go to the Code view of the page.

<script type="text/javascript">

        function txtuser() {

            var txt1 = document.getElementById('<%=TextBox1.ClientID%>').value;

            if (txt1 == "User Name") {

                document.getElementById('<%= TextBox1.ClientID %>').value = "";

            }

        }

        function txtuserid() {

        var txt = document.getElementById('<%=TextBox1.ClientID%>').value;

        if (txt == "") {

            document.getElementById('<%= TextBox1.ClientID %>').value = "User Name";

        }

       

        }

        function txtpwd() {

        var txtp = document.getElementById('<%=TextBox2.ClientID%>').value;

        if (txtp == "Password") {

            document.getElementById('<%= TextBox2.ClientID %>').value = "";

        }

        }

        function txtpwdid() {

           var txtp1 = document.getElementById('<%=TextBox2.ClientID%>').value;

           if (txtp1 == "") {

               document.getElementById('<%= TextBox2.ClientID %>').value = "Password";

           }

        }

    </script>

Now  add mouse Events on Text boxes.Like

Step4:

Run the project and Enjoy .

Out Put:

 

Download The Code