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>
  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