CSS HTML JavaScript

Como fazer input de password com olho de mostrar senha

26 de março de 2020

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.

input de password mostrando senha capa

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é? 😀

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:

input de senha aparecendo a senha ex 1

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:

input de senha aparecendo a senha ex 2

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:

input de senha aparecendo a senha ex 3

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

Subscribe
Notify of
guest
7 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
MICHELLE
OQUE E  PASSWORD?

Battisti

password é a senha do usuário

Guilherme

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?

janaina

show

Battisti

=D

Rogerio

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?

Marcio

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.

7
0
Would love your thoughts, please comment.x