Você já viu aqueles formulários de login em sites, onde você pode visualizar a senha que digitou? isso evita que ocorra erros de digitação e o usuario venha a ter que redigitar a senha e também evita bloqueio da senha se seu sistema tiver esta funcionalidade.
Utilizaremos a versão 2.0.2 do jquery, nosso formulário vai mostrar a senha e ocultar quando o usuário desejar, bastando clicar em uma imagem de um olho ao lado do campo de digitação da senha. Obiviamente existe a maneira de exibir a senha também quando o usuário segura o botão do mouse, porém particularmente eu prefiro desta forma.
Vamos começar?
Primerio precisamos de um formulário html
<form>
<p> Login </p>
<p> <label> Login </label> <input type="text" name="login" id="login"> </p>
<p> <label> Senha </label> <input type="password" name="senha" id="senha"> <img id="olho" src="img/olho.png"/></p>
<p> <input type="submit" value="Enviar"> </p>
</form>
Nada demais, um formulário simples com dois campos, e um botão para submeter o formulário
Agora vamos ao código Jquery:
<script>
$(document).ready(function () {
var senha = $("#senha");
$("#olho").click(function() {
var tipo = senha.attr("type");
if (tipo == "password") {
senha.attr("type", "text");
} else {
senha.attr("type", "password");
}
});
});
</script>
Basicamente apenas alteramos o atributo attr do campo
abaixo deixarei o link para download do exemplo completo
Gostaria de pedir sua ajuda, eu quero criar um ambiente virtual para ensinar programação para iniciantes, para isso preciso de uma boa estrutura, veja estou usando o blogger rsss, bom sinta-se a vontade, continuarei postando aqui nos momentos livres, e podem deixar dicas para proximos posts.
se você gostou do blog, quer me ajudar deixo um link para doação, não é obrigatório, desejos a todos um bom sábado !!!
Nenhum comentário:
Postar um comentário