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.
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…
https://youtu.be/nPljiJtfBUQ In this chapter We will understand What HTML Is Understanding What HTML Is: Introduction:…
The SOLID principles are a set of guidelines for writing clean and maintainable code that…
This website uses cookies.