Show and Hide Password Using jQuery

Are you tired of entering your password blindly? Do you wish you could see what you’re typing? The good news is, you can! With the power of jQuery, you can easily create a show and hide password functionality for your website’s login forms. In this tutorial, we’ll guide you through the step-by-step process, ensuring a seamless integration of this user-friendly feature.

Step 1: Implementing Show and Hide Password Using jQuery

Users who type in their passwords often second-guess themselves due to hidden characters. Allowing users to toggle between showing and hiding their passwords enhances the user experience and overall satisfaction. Let’s break down the process:

Step 1.1: HTML Markup

<input type="password" name="" id="pass" class="form-control form-control-lg " placeholder="Enter Password"  >
<div class="input-group-prepend">
    <div class="input-group-text"> 
        <span id="icon_click" class="fas fa-eye text-info"></span>
     </div>
 </div>

Step 1.2: Include jQuery Library

Before proceeding, ensure you have the jQuery library in your project. You can use a local or CDN reference like this:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() 

    {
        $("#icon_click").click(function() 

        {
       		$(this).toggleClass("fas fa-eye fas fa-eye-slash");
         	var type = $(this).hasClass("fas fa-eye-slash") ? "text" : "password";
            $("#pass").attr("type", type);

        });
    });
</script>