Neste artigo, vamos aprender como mostrar e ocultar senha com javascript. Essa funcionalidade é bastante útil em formulários de login, pois permite que o usuário visualize a senha que está digitando, caso seja necessário fazer alguma correção.
Além disso, vamos conhecer diferentes abordagens utilizando HTML, jQuery e JavaScript para implementar essa funcionalidade.
Implementando Funcionalidade de Mostrar e Ocultar Senha com jQuery
Para começar, vamos ver como implementar essa funcionalidade utilizando jQuery, uma biblioteca de JavaScript muito popular e fácil de usar.
No exemplo a seguir, iremos criar um formulário de login básico com um campo de senha e um botão para mostrar e ocultar senha com jQuery. O código HTML para simular essa tela de login é o seguinte:
<div class="container">
<form action="" id="loginForm">
<h2>Login</h2>
<p><label for="username">Username</label><input type="text" name="username" id="username"
placeholder="Username" /></p>
<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>
<p><input type="submit" value="Login" class="button" /></p>
</form>
</div>Nesse código, temos um campo de senha com o tipo “password” e um botão com o id “showPassword”. A ideia é que ao clicar nesse botão, a senha seja mostrada ou ocultada, dependendo do estado atual do campo.
Agora, utilizaremos adicionaremos a funcionalidade de mostrar e ocultar senha com jQuery. O código em JavaScript/jQuery é o seguinte:
Você vai gostar também:
Se você tem interesse em artigos relacionado a categoria Javascript clique aqui!
$(document).ready(function(){
$('#showPassword').on('click', function(){
var passwordField = $('#password');
var passwordFieldType = passwordField.attr('type');
if(passwordFieldType == 'password') {
passwordField.attr('type', 'text');
$(this).val('Hide');
} else {
passwordField.attr('type', 'password');
$(this).val('Show');
}
});
});Nesse código, utilizamos o $(document).ready() para garantir que o código JavaScript só seja executado depois que a página estiver completamente carregada.
Em seguida, utilizamos o $('#showPassword') para selecionar o elemento com o id “showPassword” e adicionamos um evento de clique utilizando o .on('click', function(){}).
Dentro desse evento, selecionamos o campo de senha com o id “password” e verificamos qual é o tipo atual desse campo utilizando o .attr('type'). Se o tipo for “password”, alteramos o tipo para “text” e atualizamos o valor do botão para “Hide”. Caso contrário, alteramos o tipo para “password” e atualizamos o valor do botão para “Show”.
Com isso, a funcionalidade de mostrar e ocultar senha com jQuery está implementada.
Adicionando Botão Para Mostrar e Ocultar Senha Com Javascript
Agora, vamos ver como implementar a funcionalidade de botão para mostrar e ocultar senha com javascript, sem a necessidade de utilizar uma biblioteca externa como o jQuery.
Primeiro, vamos criar a estrutura do HTML para o campo de senha e o botão correspondente:
<div class="container">
<h2>Login</h2>
<label for="password">Password</label>
<div class="password-container">
<input type="password" id="password" placeholder="Password" />
<button id="showPassword" class="show-password-button">Show</button>
</div>
<input type="submit" value="Login" class="button" />
</div>Nesse código, adicionamos uma div com a classe “password-container” que envolve tanto o campo de senha quanto o botão de mostrar e ocultar senha com javascript. Também atribuímos o id “showPassword” ao botão.
Em seguida, vamos adicionar o estilo CSS necessário para estilizar o campo de senha e o botão:
.container {
font-family: Arial, sans-serif;
}
.password-container {
position: relative;
}
input[type="password"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
}
.show-password-button {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
background-color: transparent;
border: none;
cursor: pointer;
}Nesse código CSS, definimos a fonte, o posicionamento e o estilo do campo de senha e do botão. O campo de senha ocupa 100% da largura disponível e possui uma borda sutil. O botão é posicionado de forma absoluta, à direita do campo de senha, e possui um fundo transparente e borda nula.
Por fim, implementaremos a lógica de mostrar e ocultar senha com javascript ao clicar no botão:
var showPasswordButton = document.getElementById('showPassword');
var passwordField = document.getElementById('password');
showPasswordButton.addEventListener('click', function () {
if (passwordField.type === 'password') {
passwordField.type = 'text';
showPasswordButton.textContent = 'Hide';
} else {
passwordField.type = 'password';
showPasswordButton.textContent = 'Show';
}
});Nesse código, atribuímos o elemento com o id “showPassword” à variável showPasswordButton e o elemento com o id “password” à variável passwordField. Utilizamos o método addEventListener() para adicionar um evento de clique ao botão.
Dentro desse evento, verificamos se o tipo do campo de senha é “password”. Se for, alteramos o tipo para “text” e atualizamos o texto do botão para “Hide”. Caso contrário, alteramos o tipo para “password” e atualizamos o texto do botão para “Show”.
Com isso, a funcionalidade de mostrar e ocultar senha com javascript puro está implementada.
Confira os melhores smartphone da Amazon:
Campo de Senha com Botão Mostrar e Ocultar Senha com Javascript
Neste último exemplo, vamos desenvolver um campo de senha com um botão que permite visualizar ou ocultar a senha ao clicar.
Primeiro, vamos baixar os dois ícones necessários para o botão. Acesse o site feather icons e pesquise por ‘eye’. Faça o download desses dois ícones.
Em seguida, crie uma pasta com três arquivos: index.html, style.css e main.js. Dentro dessa pasta, crie uma subpasta chamada ‘assets’ e coloque os ícones baixados dentro dela.
O código HTML para a estrutura básica do campo de senha e do botão é o seguinte:
<div class="container">
<h2>Login</h2>
<input type="password" id="password" placeholder="Password" />
<button id="showPassword" class="show-password-button"><img src="assets/eye.svg" alt="Show Password" /></button>
</div>Nesse código, temos um campo de senha com o id “password” e um botão com o id “showPassword”. O ícone do botão é carregado a partir do arquivo SVG “eye.svg”.
Agora, vamos adicionar o estilo CSS para estilizar o campo de senha e o botão:
.container {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
}
input[type="password"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
}
.show-password-button {
background-color: transparent;
border: none;
cursor: pointer;
}
.show-password-button img {
width: 16px;
height: 16px;
}Nesse código CSS, definimos a fonte, a exibição flexível e o alinhamento vertical dos elementos. O campo de senha possui uma largura de 100%, uma borda sutil e bordas arredondadas.
O botão possui um fundo transparente, nenhuma borda e um cursor de ponteiro. O ícone do botão possui uma largura e altura de 16 pixels.
Por fim, vamos implementar a lógica de mostrar e ocultar senha com javascript ao clicar no botão:
var showPasswordButton = document.getElementById('showPassword');
var passwordField = document.getElementById('password');
var passwordVisible = false;
showPasswordButton.addEventListener('click', function () {
passwordVisible = !passwordVisible;
if (passwordVisible) {
passwordField.type = 'text';
showPasswordButton.innerHTML = '<img src="assets/eye-off.svg" alt="Hide Password" />';
} else {
passwordField.type = 'password';
showPasswordButton.innerHTML = '<img src="assets/eye.svg" alt="Show Password" />';
}
});Nesse código, atribuímos o elemento com o id “showPassword” à variável showPasswordButton, o elemento com o id “password” à variável passwordField e definimos uma variável passwordVisible para rastrear se a senha está visível ou oculta.
Utilizamos o método addEventListener() para adicionar um evento de clique ao botão. Dentro desse evento, alteramos o valor da variável passwordVisible para o oposto do seu valor atual (true para false e vice-versa).
Em seguida, verificamos o valor da variável passwordVisible e, com base nisso, alteramos o tipo do campo de senha para “text” ou “password” e atualizamos o conteúdo do botão com o ícone correspondente.
Com isso, a funcionalidade de mostrar e ocultar senha com javascript puro está implementada.
Conclusão
Neste artigo, aprendemos diferentes maneiras de criar um campo de senha com um botão de mostrar e ocultar senha com javascript. Utilizamos HTML, jQuery e JavaScript para implementar essa funcionalidade em um formulário de login.
A funcionalidade de mostrar e ocultar senha com javascript é útil para os usuários ao digitar suas senhas, permitindo que eles visualizem a senha digitada e façam correções, se necessário.
Além disso, essa funcionalidade melhora a usabilidade do formulário, principalmente em dispositivos móveis.
Espero que este artigo tenha sido útil e que você possa aplicar essas técnicas em seus projetos. Lembre-se de adaptar o código conforme suas necessidades e estilos de programação.
