Como fazer input de password com olho de mostrar senha
Neste artigo vamos aprender a criar uma função que está em alta em muitos sites hoje em dia: o input de password com olho de mostrar senha.
Fala programador(a), beleza? Bora aprender coisa nova?
Primeiramente vamos comentar sobre a técnica em si
Basicamente em formulários de registro e login, temos um campo destinado a senha
Este campo contem o input type de password, o que omite os caracteres para dar segurança ao usuário
Uma prática que vem sendo utilizado desde os primórdios da web
Porém com os sites solicitando senhas cada vez mais fortes e evitar uma prematura recuperação de senha
Foi desenvolvida esta função que mostra a senha que o usuário está digitando
E isso é feito com um pequeno toque de JavaScript, manipulando o tipo do campo e setando ele para text
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Aí o input funciona da mesma maneira, porém exibindo o texto, que é a senha, que está sendo digitada nele, legal né? 😀
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Na prática:
Agora vamos fazer isso na prática, veja este código de HTML do exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Como fazer input de password com olho de mostrar senha</title>
<!-- lib de icons -->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
</head>
<body>
<h2>Faça o login</h2>
<form>
<div>
<input type="email" name="email" placeholder="Digite seu e-mail">
</div>
<div>
<input type="password" name="password" placeholder="Digite sua senha">
<span class="lnr lnr-eye"></span>
</div>
<div>
<input type="submit" value="Entrar">
</div>
</form>
</body>
</html>
Aqui criamos um projeto básico, simulando uma tela de login
E também uma fonte de ícones chamada Linear Icons para usar o ícone de olho deles
E isso representa a seguinte tela no navegador:
Vamos adicionar um pouco de CSS, para a tela ficar mais bonita e o olho entrar no input, que é como essa funcionalidade é posicionada
Veja o código adicionado:
body {
font-family: Helvetica;
}
div {
position: relative;
width: 200px;
}
input {
border-radius: 0;
padding: 5px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.lnr-eye {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
}
E aí o seguinte resultado é exibido no navegador:
Agora vamos prosseguir para a parte do JavaScript, que vai executar a funcionalidade de fato
let btn = document.querySelector('.lnr-eye');
btn.addEventListener('click', function() {
let input = document.querySelector('#password');
if(input.getAttribute('type') == 'password') {
input.setAttribute('type', 'text');
} else {
input.setAttribute('type', 'password');
}
});
E este é o único código que precisamos!
Primeiro identificamos o ícone e colocamos a uma variável, depois inserimos um evento de click nele via addEventListener
E quando ele for clicado identificamos o input de password e também o adicionamos em uma variável
Na condicional if checamos o atributo deste input, se estiver como password transformamo para texto e vice-versa
Isso fará com que o evento possa ser desfeito 🙂
Veja o resultado:
E com isso aprendemos como fazer o input de password com olho de mostrar senha!
Conclusão
Criamos neste artigo um input de password com um ícone de olho, que ao ser executado com um evento de click mostra a senha em forma de texto
Isso é feito alterando o input type de password para text via JavaScript
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
O que é o input type password?
Antes de sair codando, bora entender a base
O input type password é o campo de senha do HTML
Basta colocar type="password" dentro da tag input e o navegador já esconde os caracteres, trocando cada letra por uma bolinha ou asterisco
É o jeito padrão da web de proteger a senha de olhos curiosos na hora que a pessoa digita
Um exemplo bem simples:
<input type="password" name="password" placeholder="Digite sua senha">
Se você já conhece o input de texto comum, é a mesma ideia, só muda que aqui os caracteres ficam ocultos
E é justamente esse type que a gente vai manipular com JavaScript pra criar o olho de mostrar e esconder a senha =)
Perguntas frequentes
Como funciona o input type password?
Ele esconde os caracteres que a pessoa digita, trocando por bolinhas ou asteriscos
O valor real continua no campo, só a exibição que fica oculta pra segurança
Como mostrar a senha do input type password?
Basta trocar o atributo type de password para text via JavaScript, que é exatamente o que a gente faz no clique do olho aqui no tutorial
Pra esconder de novo é só voltar o type pra password
Qual a diferença entre input type text e password?
Os dois guardam o texto do mesmo jeito
A diferença é só visual: o password oculta os caracteres na tela e o text mostra tudo normalmente
Uma dica pra deixar mais redondo: se em vez do span você usar um botão de verdade pro olho, o campo fica mais acessível pra quem navega pelo teclado ou usa leitor de tela
Dá pra colocar um aria-label tipo ‘mostrar senha’ pra descrever o que o botão faz
Não é obrigatório pra função rodar, mas é aquele capricho que separa o código de produção do código só de exemplo
Leia também
Formações
Formação SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
ChatGPT: o que é, como usar, dicas e como acessar login
ChatGPT é uma ferramenta de processamento de linguagem natural (NLP) baseada na arquitetura GPT-3.5, desenvolvida pela OpenAI. Sua criação representa um marco significativo no campo […]
password é a senha do usuário
Teria alguma forma de fazer esse input do password, para somente números e aparecendo o teclado somente numérico no telefone ao invés do teclado alphabetico?
Invez de ser o password coloca pin
show
=D
Tentei usar esse mesmo codigo para “senha” e “confirma senha”,mas o confirma senha não mostra ou quando mostra não esconde, como posso estar solucionando isso?
Faltou o “id” na HTML, talvez seja isso que não esteja funcionando para você!
No site está assim:
<input type=“password” name=“password” placeholder=“Digite sua senha”>
o certo é assim:
<input id=“password” type=“password” name=“password” placeholder=“Digite sua senha”>
Desta forma não chama o Java.
Ok, mas qual o nome do arquivo java e como “chamar” o mesmo pelo html? Tá incompleto