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”: Exibir ou Ocultar a sua senha com jQuery

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.

César Ribeiro
Written by

Hi, my name’s Cesar H. Ribeiro, I’m Brazilian and I live in São Paulo country town. I’ve been working with Web Development since 2006, I’m Web Developer Freelancer, my main specialty is deploying custom Web Sites using the WordPress platform with base, transforming PSD/Layouts for Custom Themes. In feel years with Developer Freelancer, I worked with many agencies around the world like: Brazil, Australia, USA, Germany and Austria.

Related Posts