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

Подписаться 15 тыс.

Просмотров 27 тыс.

50% 1

In this tutorial, you'll learn how to toggle show/hide password with eye icon
Sponsor me on GitHub!
github.com/sponsors/miguelznunez
Follow my blog:
/ miguelznunez
Email : mignunez@csumb.edu
Medium : / miguelznunez
Codepen : codepen.io/miguelznunez
GitHub : github.com/miguelznunez

Опубликовано:

3 июл 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 30

@aurelieneveu9595 Год назад

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

@spongebob_gamingofficial2755 Год назад

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

@rosen.espinoza9477 Год назад

Another great video 👏

@Topisco_1 4 месяца назад

Hi, from Nigeria Thanks alot❤

@skanderchouiter5384 Год назад

thank you man ! amazing

@alphamx13 Год назад

Great, thanks !!

@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 8 месяцев назад

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 6 месяцев назад

thank youu

@Gaurav_khadka 12 дней назад

Helped ❤❤❤❤

@uchihasasuke13 День назад

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

@nandopookey9195 Год назад

Thank you so much sir

@woutflorian 6 месяцев назад

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 2 месяца назад

thank you bro

@_carpe_vinum 5 месяцев назад

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.

@rahulmittal1414 10 месяцев назад

can we use same in excel

@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

@user-sq5ho3ri5s 10 месяцев назад

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

@crespi4163 3 месяца назад

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

@dhirajchavan1196 2 месяца назад

Help me out with my problem

@hamasood701 Год назад

Amazing

@codefoxx Год назад

Thanks

@dhirajchavan1196 2 месяца назад

Mine is not coming inside the box

@laziz_khamidov 2 месяца назад

but it worked when I did methods = dialog

@Nitesh__Nayak Месяц назад

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

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