Password show and hide with eye using javascript
In this article, we will learn how to implement the functionality of password show and hide with eye using JavaScript.
Nowadays, generally in the registration and login form, we need a password field. To make that password field attractive we can use the functionality of show and hide the password by clicking on the eye button.
In this article, we used font awsome CDN to use the eyes icon. We also created a JavaScript function to make this happen, which is responding on the onClick() event.
<!DOCTYPE html> <html> <head> <title>Password Hide Show</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" >
The main logic behind this is just to change the input type and changing the class name of the icon. It is very easy to implement password show and hide with eye button using JavaScript.
If you want to implement the same functionality using jQuery then follow our other article password show and hide using jQuery.
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.