Post
Ask Question

Show And Hide Password Using jQuery In ASP.NET

Introduction

In this blog, we will discuss how to create a button to show and hide passwords using jQuery in ASP.NET.

By clicking the checkbox or  hovering the mouse on the icon, we can make the password visible.

Step 1

Create a new project in the Visual Studio version of your choice with an empty template. Give it a meaningful name.

Step 2

Add a web form to your project. Right-click and choose a new item, select web form, and give it a name.

Step 3

Add jQuery, bootstrap, and fa icon cdn links to the head section.

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">  
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  

Step 4

Write JavaScript and function to hide and show the password.

  1. <script type="text/javascript">  
  2.         $(document).ready(function () {  
  3.             $('#show_password').hover(function show() {  
  4.                 //Change the attribute to text  
  5.                 $('#txtPassword').attr('type', 'text');  
  6.                 $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');  
  7.             },  
  8.             function () {  
  9.                 //Change the attribute back to password  
  10.                 $('#txtPassword').attr('type', 'password');  
  11.                 $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');  
  12.             });  
  13.             //CheckBox Show Password  
  14.             $('#ShowPassword').click(function () {  
  15.                 $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');  
  16.             });  
  17.         });  
  18.     </script>  

Step 5

Design HTML by dragging and dropping textbox control, checkbox control, and button control as given below.

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div class="container">  
  4.             <h2>Show or Hide Password</h2>  
  5.             <div class="row">  
  6.                 <div class="col-md-6">  
  7.                     <p>Hover on the eye to show/hide the password</p>  
  8.                     <label>Password</label>  
  9.                     <div class="input-group">  
  10.                         <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>  
  11.                         <div class="input-group-append">  
  12.                             <button id="show_password" class="btn btn-primary" type="button">  
  13.                                 <span class="fa fa-eye-slash icon"></span>  
  14.                             </button>  
  15.                         </div>  
  16.                     </div>  
  17.                 </div>  
  18.                 <div class="col-md-6">  
  19.                     <p>Check to show/hide the password</p>  
  20.                     <label>Password</label>  
  21.                     <div class="input-group">  
  22.                         <asp:TextBox ID="Password" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>  
  23.                         <div class="input-group-append">  
  24.                             <span class="input-group-text">  
  25.                                 <asp:CheckBox ID="ShowPassword" runat="server" CssClass="checkbox" />  
  26.                             </span>  
  27.                         </div>  
  28.                     </div>  
  29.                 </div>  
  30.             </div>  
  31.         </div>  
  32.     </form>  
  33. </body>  

Here is the complete code for hiding and showing password.

  1. <!DOCTYPE html>         
  2.   
  3. <html>  
  4. <head runat="server">  
  5.     <title>Show Hide Password</title>  
  6.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">  
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  9.     <script type="text/javascript">  
  10.         $(document).ready(function () {  
  11.             $('#show_password').hover(function show() {  
  12.                 //Change the attribute to text  
  13.                 $('#txtPassword').attr('type', 'text');  
  14.                 $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');  
  15.             },  
  16.             function () {  
  17.                 //Change the attribute back to password  
  18.                 $('#txtPassword').attr('type', 'password');  
  19.                 $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');  
  20.             });  
  21.             //CheckBox Show Password  
  22.             $('#ShowPassword').click(function () {  
  23.                 $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');  
  24.             });  
  25.         });  
  26.     </script>  
  27. </head>  
  28. <body>  
  29.     <form id="form1" runat="server">  
  30.         <div class="container">  
  31.             <h2>Show or Hide Password</h2>  
  32.             <div class="row">  
  33.                 <div class="col-md-6">  
  34.                     <p>Hover on the eye to show/hide the password</p>  
  35.                     <label>Password</label>  
  36.                     <div class="input-group">  
  37.                         <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>  
  38.                         <div class="input-group-append">  
  39.                             <button id="show_password" class="btn btn-primary" type="button">  
  40.                                 <span class="fa fa-eye-slash icon"></span>  
  41.                             </button>  
  42.                         </div>  
  43.                     </div>  
  44.                 </div>  
  45.                 <div class="col-md-6">  
  46.                     <p>Check to show/hide the password</p>  
  47.                     <label>Password</label>  
  48.                     <div class="input-group">  
  49.                         <asp:TextBox ID="Password" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>  
  50.                         <div class="input-group-append">  
  51.                             <span class="input-group-text">  
  52.                                 <asp:CheckBox ID="ShowPassword" runat="server" CssClass="checkbox" />  
  53.                             </span>  
  54.                         </div>  
  55.                     </div>  
  56.                 </div>  
  57.             </div>  
  58.         </div>  
  59.     </form>  
  60. </body>  
  61. </html>  

Step 5

Run the project by pressing CTRL+F5.
 
Final Output
Next Recommended Reading Showing Page Loader Using JQuery in ASP.NET