Introdução:
Olá pessoal, hoje eu vou mostrar para vocês como Exibir ou Ocultar a sua senha com jQuery e vamos trabalhar com as seguintes “ferramentas” HTML + Bootstrap + Font Awesome + SASS + jQuery. Eu tentei deixar de uma forma mais simples possível, para que todos possam aplicar essa função em qualquer projeto.
Uma pergunta pode aparecer, o porque eu escolhi trabalhar com SASS nesse tutorial??? Por causa que hoje em dia é uma das “tecnologia” mais aplicada em agências digitais e também pela praticidade que a mesma oferece 😉
Colocando as Mãos no Código:
Agora vamos para a parte mais divertida, que é por a mão no código \o/ e bora começar a codar o nosso tutorial…heheheh
Primeiro Passo | Criação da index.php
Criei um formulário de Login e Senha para exemplificar esse tutorial, como vocês podem ver eu apliquei as seguintes bibliotecas Bootstrap (bootstrap.min.css) e Font Awesome (font-awesome.min.css) para aplicar um estilo pré-criado e também para a aplicação do ícone.
Segundo Passo | Criação do jQuery:
Eu fiz a função com .hover() mas se vocês desejarem alterar para um clique ao invés do hover é só aplicar o .click() a função irá funcionar normalmente.
Como você podem ver a função é bem simples, ela verifica se o nosso “ícone” está selecionado e muda o type: input=[password] -> input=[text] e a classe do nosso “ícone”: 
Criação do Estilo “SCSS / CSS”
(Estilo – SCSS)
(Estilo – CSS)
Eu deixei das duas formas tanto de SCSS e CSS para ficar mais simples a visualização. Se você ainda não tem “prática” com o SASS, já que o mesmo precisa ter um conhecimento um pouco maior. Mas eu indico para você pode dar uma olhadinha no meu post Como iniciar com o SASS no meu tema? que lá eu mostrei uma breve introdução ao SASS.
Consideração Final
Como vocês poderam ver, não existe nenhum segredo é muito simples mesmo de criar, eu penso que essa função hoje em dia é bem útil para ajudar aquelas pessoas que ficam sempre com aquela dúvida se a senha está correta ou não.
Abaixo, vocês podem ver como o nosso tutorial ficará depois de pronto.
See the Pen Show/Hide your Password by César Ribeiro (@chrdesigner) on CodePen.dark
Espero que vocês tenham gostado desse tutorial e até breve ?
Por favor, se você gostou deixe seu like e também se possível compartilhe.
