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 this chapter We will understand What HTML Is Understanding What HTML Is: Introduction: In…
The SOLID principles are a set of guidelines for writing clean and maintainable code that…
In this article, We will learn to create a custom admin menu in the WordPress…
In this article, you will learn how to use Ajax in WordPress. Ajax has rapidly…
In this article, you will learn how to create a custom dynamic WordPress widget. I…
When you work with WordPress, you might have a question that how the widget in…
This website uses cookies.