How To Show/Hide an Input Field Password Using the Eye Icon - HTML, CSS & JavaScript

[@spongebob_gamingofficial2755]

It helps me a lot, I'm still practicing web dev

[@Iro0]

If someone having a trouble with eye not slashig, then put this:
this.classList.toggle("fa-eye");
this.classList.toggle("fa-eye-slash", !this.classList.contains("fa-eye"));
Insted of this:
this.classList.toggle("fa-eye-slash");

[@mdarif2835]

Thanks for this it work for me but additional add for this class in css
.fa-eye-slash{
position:absolute;
top: 29%;
right: 4%;
cursor: pointer;
}

[@rgferg2657]

thank youu

[@Gaurav_khadka]

Helped ❤❤❤❤

[@uchihasasuke13]

That's why he's the MVP... that's why he's the goatt the GOATTT

[@woutflorian]

Would you please tell me how to switch the icons so that the input start with the "fa-eye-slash" icon and password hidden and when toggled the "fa-eye" icon and the password showing?
For some reason simple switching them around is not doing the trick... 🤔

[@aurelieneveu9595]

i've been turning aroud this problem for a while now ! your explainations helped a lot, a big thank you :)

[@narendrasubramanya5354]

Great video dude ... Is it possible to change the password character from dots to say something like x or to any character of our choice. If you can bring up a tutorial video for that it would be very helpful and informative too. Kudos for this video

[@c4rp3v1num]

I am trying to adapt this into my own project (my own login screen that I have designed) - but having difficulty getting it to work. It is probably the way I have my code set up for the fields and icons which is slightly different than yours. I use an a.href for the icon rather than CSS code with pointer property.




Clicking on the fa-eye icon makes a "missing image" icon appear next to the fa-eye icon, instead of showing the fa-eye-slash icon in place of the fa-eye icon. And the password does not change to text.
Any help would be greatly appreciated. Thank you in advance.

[@Topisco_1]

Hi, from Nigeria
Thanks alot❤

[@Mathotto]

it's a good way of login password,thanks a lot

[@rosen.espinoza9477]

Another great video 👏

[@skanderchouiter5384]

thank you man ! amazing

[@laziz_khamidov]

thank you bro

[@nandopookey9195]

Thank you so much sir

[@AquariusGoldTM913]

Fantastic and precise bro. I tried the script on my form but I got a unique problem my form has multiple password fields and even though i gave them the same id only the first field was responsive. all the rest didn't seems to hide and show the password. The icons were fine though.

[@codefoxx]

You shouldnt use an id name more than once, perhaps you can do id1 and id2

[@AquariusGoldTM913]

@@codefoxx I tried that as well but how would i have the script pick up on the other ids. I have password and verify password fields in my form.

[@codefoxx]

@@AquariusGoldTM913 just create a variable for each of the id's and a function that handles each of them separately

[@alphamx13]

Great, thanks !!

[@Hakdog-y2n]

Can i get the source code? Mine is not working it says "Uncaught TypeError: Cannot read properties of null(reading 'addEventListener')

[@crespi4163]

try to put the code inside this:
document.addEventListener('DOMContentLoaded', function () {
//code...
});

[@dhirajchavan1196]

Help me out with my problem

[@rahulmittal1414]

can we use same in excel

[@dhirajchavan1196]

Mine is not coming inside the box

[@laziz_khamidov]

but it worked when I did methods = dialog

[@Nitesh__Nayak]

It does not work with latest library of font-awesome.

[@hamasood701]

Amazing

[@codefoxx]

Thanks

[@jamesokonkwo5815]

This part this.classList.toggle("fa-eye-slash"); is not yet working for me, does not toggle. Please what are the things I should ensure that are put in place?

[@nazrinrustamova6239]

@ahmedradi99 how pls tell me