Sunday, September 24, 2023
Hire us on
HomejQueryShow and Hide Password Using jQuery

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>

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=""></script>

Step 1.3: jQuery Script

Let’s write the jQuery script to toggle between showing and hiding the password. Place the following code within a <script> tag:

<script type="text/javascript">


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


Step 2: Enhance Your User Experience

Implementing this functionality is great, but enhancing your content with further insights is even better. To delve deeper into web development topics, consider exploring articles on best practices for form design and securing user data.

This tutorial will refer to specific resources to provide additional information and context. If you’re interested in deepening your understanding, you can refer to the following articles:



Please enter your comment!
Please enter your name here

- Advertisment -
Hire Us