Exibindo senha com javascript

Walter Nascimento
Walter Nascimento | PT-BR
1 min readNov 21, 2020

Mostrando senha com HTML5 e JavaScript

[click here for English]

Ao criar um formulário de login, é comum ser exigido a funcionalidade do ‘olhinho’, que ao clicar é exibido a senha e clicar novamente é escondido, por tanto, hoje iremos fazer esta funcionalidade.

Código

Primeiro vamos criar a interface, faremos algo simples, utilizando apenas HTML.

Código em HTML

Os principais elementos aqui são:

  • input = Irá receber o valor da senha, e será exibido no formato senha(***);
  • button = Ao clicar irá converter o tipo password para o tipo text e vice-versa;
Código em JS

Em javascript temos, o input e o button, no button é adicionado uma função chamada togglePass.

A função togglePass verifica se o tipo do input é password, caso seja altera o type para text e caso não ele altera para password.

pronto simples assim.

Demo

Veja abaixo o projeto completo funcionando.

Projeto no codepen

Youtube

Se preferi assistir, vejo o desenvolvimento no youtube.

Video no youtube

Obrigado por ler!

Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!

😊😊 Até mais! 😊😊

--

--