Password Hide & Show in forms using jQuery


Implementing password hide/show functionality using Font Awesome icons and jQuery can significantly improve the user experience on your website's forms, especially in fields where users enter sensitive information such as passwords to make it easier to manage and verify their passwords.

Example 
<html>
 <head>
  <title>Password Hide & Show using jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" >
 </head>
 <body>
  <div class='container mt-5'>
   <div class='row'>
    <div class='col-md-6 mx-auto'>
     <h4 class='text-center'>Password Hide & Show in forms using Fontawesome in jQuery</h4><hr>
     <div class='input-group mb-3'>
      <div class='input-group-text'>
       <i class='fas fa-user'></i>
      </div>    
      <input type='text' class='form-control' placeholder='Enter Username'>
     </div>
     <div class='input-group mb-3'>
      <div class='input-group-text'>
       <i class='fas fa-eye' id='icon'></i>
      </div>    
      <input type='password' class='form-control' id='pass' placeholder='Enter Password'>
     </div>
     <div class='text-center'>
      <input type='submit' class='btn btn-secondary'>
     </div>
    </div>
   </div>
  </div>
 </body>
<script>
 $('#icon').click(function(){
   $(this).toggleClass('fas fa-eye fas fa-eye-slash');
   var changetype=$(this).hasClass('fas fa-eye-slash')? 'text':'password';
   $('#pass').attr('type',changetype);
 });
</script>
</html>
Try it Yourself

Demo :