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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Exibir ou Ocultar a sua senha com jQuery</title> | |
| <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> | |
| <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> | |
| </head> | |
| <body> | |
| <div id="global-login-form"> | |
| <h2>Login</h2> | |
| <form id="login-form"> | |
| <ul> | |
| <li> | |
| <label>Username</label> | |
| <input required="required" type="text" name="username" id="username" placeholder="Username" class="form-control" /> | |
| </li> | |
| <li> | |
| <label>Password</label> | |
| <input required="required" type="password" name="password" id="password" placeholder="Password" class="form-control" /> | |
| <button type="button" id="show_password" name="show_password" class="fa fa-eye-slash" aria-hidden="true"></button> | |
| </li> | |
| <li class="text-right"> | |
| <button type="submit" name="submit" class="btn btn-primary btn-lg">Submit</button> | |
| </li> | |
| </ul> | |
| </form> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> | |
| <!-- AQUI VAI SER APLICADO O NOSSO JQUERY --> | |
| </body> | |
| </html> |
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:
| jQuery(document).ready(function($) { | |
| $('#show_password').hover(function(e) { | |
| e.preventDefault(); | |
| if ( $('#password').attr('type') == 'password' ) { | |
| $('#password').attr('type', 'text'); | |
| $('#show_password').attr('class', 'fa fa-eye'); | |
| } else { | |
| $('#password').attr('type', 'password'); | |
| $('#show_password').attr('class', 'fa fa-eye-slash'); | |
| } | |
| }); | |
| }); |
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)
| #global-login-form{ | |
| width: 50%; | |
| margin: 0 auto; | |
| #login-form{ | |
| ul{ | |
| list-style-type: none; | |
| padding-left: 0; | |
| li{ | |
| position: relative; | |
| margin-bottom: 1em; | |
| button{ | |
| &#show_password{ | |
| position: absolute; | |
| bottom: 2px; | |
| right: 0; | |
| border: none; | |
| background-color: transparent; | |
| font-size: 30px; | |
| } | |
| &[type=submit]{ | |
| margin-top: 1em; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } |
(Estilo – CSS)
| #global-login-form { | |
| width: 50%; | |
| margin: 0 auto; | |
| } | |
| #global-login-form #login-form ul { | |
| list-style-type: none; | |
| padding-left: 0; | |
| } | |
| #global-login-form #login-form ul li { | |
| position: relative; | |
| margin-bottom: 1em; | |
| } | |
| #global-login-form #login-form ul li button#show_password { | |
| position: absolute; | |
| bottom: 2px; | |
| right: 0; | |
| border: none; | |
| background-color: transparent; | |
| font-size: 30px; | |
| } | |
| #global-login-form #login-form ul li button[type=submit] { | |
| margin-top: 1em; | |
| } |
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.
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.
