Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to show hide password characters in a TextBox in ASP.NET

Author: Jeff Nava
Download Source Code : 1452_ShowHidePassword.zip

This article will show you how we can show hide password characters in a TextBox in ASP.NET.

It is really very easy to show and hide password characters and it has nothing to do with ASP.NET code. It is purely client-side JavaScript code. So I have used jQuery to write this simple piece of code. I have used a CheckBox to show and hide characters in a TextBox but you can use a button if you want and write your code on that button click event.

You need to download jQuery and add into your project. I have my jQuery file in Script folder.
 
  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Web Site
  4. Website > Add New Item > Web Form
  5. Write following tag in between head tag of aspx page

    <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>


  6. Write code below in between div tag

    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                Password:
            </td>
            <td>
                <asp:TextBox ID="txtPassword" runat="server" TextMode = "Password" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <asp:CheckBox ID="chkShowPassword" runat="server" Text="ShowPassword" />
             </td>
        </tr>
    </table>
     
  7. Now add another script tag in between head tag and write code below

    <script type="text/javascript">
        $(function () {
            $("#chkShowPassword").bind("click", function () {
                var txtPassword = $("[id*=txtPassword]");
                if ($(this).is(":checked")) {
                    txtPassword.after('<input id = "txt_' + txtPassword.attr("id") + '" type = "text" value = "' + txtPassword.val() + '" />');
                    txtPassword.hide();
                } else {
                    txtPassword.val(txtPassword.next().val());
                    txtPassword.next().remove();
                    txtPassword.show();
                }
            });
        });
    </script>

     
  8. Press F5 and see the result

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to add image in PDF file using iTextSharp in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net