Toggle Password Visibility HTML Javascript

Hi Everyone, In this video we will learn how to Toggle Password Visibility.

Source Code: https://codelikeadev.com/blog/toggle-...

You might have come across this functionality in so many websites, where you see a toggle button that toggles the password visibility for you.

Some websites have this as a "Show Password" button, some have a "Password Eye" icon which suggests you can click or hover over it and you will be able to see the password you typed.

This "Toggle Password Visibility" is an amazing functionality when you have to give a final look at the password that you just typed.

This toggle button for the password field becomes even more important when we are using mobile devices.

So, now that we know the benefit that this password toggle button gives us, let's see how we can create one for our website.

Surprisingly, it's very simple and in this post, we will create one step by step.

First, we will create the HTML for the label and the password field.

The HTML is very simple and clear. Note that we are using the input type of password for the password field. This is industry standard and every time you design something that takes sensitive information, the use of an input type of password is recommended.

Now, we will add some CSS to it to make it visually more attractive (even for this blog post :))

The CSS for these two elements is fairly simple as well and we are doing nothing related to the toggle password functionality at the moment.

Now, we will add a button that will toggle our password.

There is no right or wrong way to add a show password button to your website.

Go with however it suits you and matches the overall design of your website.

In this blog post, I am going for an eye button that sits right at the end of the password field.

At the moment, both the icons sit on top of each other.

We will have to hide one when the page loads and with the powers of javascript toggle between these icons and also show and hide the password to the user.

On the top of the javascript file, we are registering our controls and inputs that we need during this toggle password functionality.

Then we create an event listener to the anchor element which we are treating as the toggle button.

On the click of that button, we will change the type of the input field from password to text and then back to password.

This is where the secret to the toggle password functionality lies.

Different websites use different ways to toggle, some toggle just on the hover of the mouse, some on the click.

Along with changing the type of the password field, we are hiding and showing the icons of the eye and toggling between open eye and closed eye.

The icons have been taken from Flat Icons.

💖 Subscribe to show support: https://bit.ly/2FAgXzS
☕ Buy me a coffee: https://www.buymeacoffee.com/SameerSaini