{"id":4037,"date":"2016-03-23T11:51:23","date_gmt":"2016-03-23T13:51:23","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=4037"},"modified":"2016-03-23T11:51:23","modified_gmt":"2016-03-23T13:51:23","slug":"botao-mostrar-ou-ocultar-senha","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/html\/botao-mostrar-ou-ocultar-senha","title":{"rendered":"Bot\u00e3o Mostrar ou ocultar senha"},"content":{"rendered":"

Quando criamos um formul\u00e1rio de cadastro<\/strong> temos a tend\u00eancia de exibir um campo \u201cSenha<\/em>\u201d e outro de \u201cConfirmar senha<\/em>\u201d. isso \u00e9 para aumentar a chance do usu\u00e1rio digitar a senha desejada de forma correta.
\n
\nOutra tend\u00eancia cada vez mais comum<\/strong> \u00e9 ter um bot\u00e3o de mostrar\/ocultar senha. O bot\u00e3o quando clicado ir\u00e1 mostrar ao usu\u00e1rio o que ele digitou no campo senha. Caso seja necess\u00e1rio alterar a senha digitada, o usu\u00e1rio poder\u00e1 fazer diretamente no campo da senha.<\/p>\n

Usando essa mesma ideia, podemos adicionar este bot\u00e3o em telas de login<\/strong>. Um bom exemplo do bot\u00e3o exibir senha encontramos no site mobile do Facebook:<\/p>\n

\"Exemplo
Op\u00e7\u00e3o exibir senha, site mobile do Facebook<\/figcaption><\/figure>\n

Essa funcionalidade pode incrementar e aumentar a usabilidade do formul\u00e1rio<\/a>, principalmente para usu\u00e1rios m\u00f3bile onde sabemos que a entrada de dados n\u00e3o \u00e9 uma tarefa muito f\u00e1cil.<\/p>\n

Criando o bot\u00e3o mostrar\/ocultar senha<\/h2>\n

Primeiro precisamos criar o formul\u00e1rio. Criaremos uma tela de login para o exemplo.<\/p>\n

\r\n<div class="container">\r\n  <form action="" id="loginForm">\r\n    <h2>Login<\/h2>\r\n    <p><label for="username">Username<\/label><input type="text" name="username" id="username" placeholder="username" \/><\/p>\r\n    <p><label for="password">Password<\/label><input type="password" name="password" id="password" placeholder="password" \/> <input type="button" id="showPassword" value="show" class="button" \/><\/p>\r\n    <p><input type="submit" value="Login" class="button" \/><\/p>\r\n  <\/form>\r\n<\/div>\r\n<\/pre>\n
jQuery para mostrar ou ocultar a senha<\/h3>\n
Com o formul\u00e1rio criado podemos criar o script em jQuery<\/strong> necess\u00e1rio para mudar o campo de senha para uma caixa de texto.<\/p>\n
Vamos adicionar um evento de clique no bot\u00e3o mostrar\/ocultar senha<\/strong>. Dentro desse evento armazenamos em uma vari\u00e1vel o tipo atual do campo, se \u00e9 de senha ou texto.
\nSe for um campo de senha, precisamos mudar o type<\/em> do formul\u00e1rio para texto, assim:<\/p>\n
\r\npasswordField.attr('type', 'text');\r\n<\/pre>\n
Isso ir\u00e1 mostrar a senha do usu\u00e1rio.<\/p>\n
Precisamos tamb\u00e9m mudar o texto de \u201cMostrar senha<\/em>\u201d para \u201cOcultar senha<\/em>\u201d. Podemos fazer assim:<\/p>\n
\r\n$(this).val('Hide');\r\n<\/pre>\n
Em seguida adicionamos o c\u00f3digo para manipular o evento de esconder a senha e mudar o campo de texto para um campo de senha. <\/p>\n
Fizemos isso usando o m\u00e9todo attr () novamente.<\/p>\n
\r\npasswordField.attr('type', 'password');\r\n<\/pre>\n
Precisamos novamente mudar o texto do bot\u00e3o para \u201cMostrar senha<\/em>\u201d:<\/p>\n
\r\n$(this).val('Show');\r\n<\/pre>\n
Abaixo o c\u00f3digo jQuery completo:<\/p>\n
\r\n\/\/ Check javascript has loaded\r\n$(document).ready(function(){\r\n\r\n  \/\/ Click event of the showPassword button\r\n  $('#showPassword').on('click', function(){\r\n    \r\n    \/\/ Get the password field\r\n    var passwordField = $('#password');\r\n\r\n    \/\/ Get the current type of the password field will be password or text\r\n    var passwordFieldType = passwordField.attr('type');\r\n\r\n    \/\/ Check to see if the type is a password field\r\n    if(passwordFieldType == 'password')\r\n    {\r\n        \/\/ Change the password field to text\r\n        passwordField.attr('type', 'text');\r\n\r\n        \/\/ Change the Text on the show password button to Hide\r\n        $(this).val('Hide');\r\n    } else {\r\n        \/\/ If the password field type is not a password field then set it to password\r\n        passwordField.attr('type', 'password');\r\n\r\n        \/\/ Change the value of the show password button to Show\r\n        $(this).val('Show');\r\n    }\r\n  });\r\n});\r\n<\/pre>\n
Essa funcionalidade j\u00e1 ajuda muito usu\u00e1rios desktops, imagina usu\u00e1rios de dispositivos mobile<\/strong>, pois a chance de digitarmos algo errado em telas pequenas \u00e9 alta<\/strong>; E, por conta disso, \u00e9 comum o dispositivo exibir o \u00faltimo caractere da senha por alguns segundos. Isso j\u00e1 facilita bastante.<\/p>\n
Aqui voc\u00ea pode conferir um exemplo do tutorial<\/strong>:<\/p>\n
See the Pen Myprbq<\/a> by Paul (@paulund<\/a>) on CodePen<\/a>.<\/p>\n