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

[@aurelieneveu9595]

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

[@JcodeprgmmngSEtech]

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

[@rosen.espinoza9477]

Another great video 👏

[@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

[@Topisco_1]

Hi, from Nigeria Thanks alot❤

[@Mathotto]

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

[@skanderchouiter5384]

thank you man ! amazing

[@alphamx13]

Great, thanks !!

[@nandopookey9195]

Thank you so much sir

[@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... 🤔

[@laziz_khamidov]

thank you bro

[@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.

[@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

[@hamasood701]

Amazing

[@codefoxx]

Thanks

[@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

[@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... });

[@rahulmittal1414]

can we use same in excel

[@Movies-i7c]

how do i know all those code in js

[@dhirajchavan1196]

Help me out with my problem

[@dhirajchavan1196]

Mine is not coming inside the box

[@Nitesh__Nayak]

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

[@laziz_khamidov]

but it worked when I did methods = dialog

[@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?

[@ahmedradi99]

same with me Edit: i found a solution on a YT channel, reply to me to tell u how, it's easy without needing javascript.js file only Html.

[@nazrinrustamova6239]

@@ahmedradi99 how pls tell me

[@ahmedradi99]

@@nazrinrustamova6239 hi, i don't remember what is this reply for? what's the topic