Mostrar e Ocultar Senha com Jquery

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

http://adf.ly/10705965/mostrar-e-ocultar-senha

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 !!!

                  doe com paypal