password show and hide using jQuery
In this article, we will let you know how to put the password show and hide functionality by clicking on the eye icon using jQuery.
During creating a registration or login form generally, we have a password field in most cases. To make the user interface better we can use the password show and hide functionality.
Also, users want to see their typed password because in many cases users just get confused by a letter. Either they typed it right or wrong. So from the user’s perspective, it is also good to use password show and hide functionality by clicking on the eye icon.
We used the jQuery CDN, instead of downloading jQuery to implement the functionality of password show and hide using jQuery. You can either download jQuery or use the below CDN.
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>We have also used the font awesome CDN to show the eye icon. CDN for font awesome is following as:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">Full code to implement the functionality of password show and hide using jQuery is following as:
<!DOCTYPE html> <html> <head> <title>Password Hide Show using jQuery</title> </head> <!-- This is font awsome cdn to use eye icons --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <body> <!-- This is Password field --> Password: <input type="password" id="passwordInputID" value="MyFakePassword"> <!-- This is eye button --> <span style="border:1px solid #ddd;padding:0 2px;"> <i id="eyeChangeId" class="fa fa-eye" >
We just used jQuery to get the input field type and we changed it using the jQuery function. We also changed the eye icon by using the onClick event and changed the classes
If you also want to implement this functionality using complete JavaScript then follow our other article Password show and hide using javascript.
In the world of software development, the journey of debugging can often feel like a…
Shared Hosting vs. Cloud Hosting Comparison Introduction Choosing the right hosting solution is crucial for…
Top 5 Android Phones in India Top 5 Android Phones in India for 2024: Unmatched…
https://www.youtube.com/watch?v=QU0Hm7k_hWI Introduction: Previously, in Chapter 2, we discussed html elements and structure. In this chapter,…
https://youtu.be/HihwZMLuXGY Introduction: Welcome back to our HTML course! In the last chapter, we explored the…
Introduction Mastering Laravel Eloquent ORM: Easy Guide for Beginners Laravel, one of the most popular…
This website uses cookies.