Resumo : neste tutorial, você aprenderá como alternar a visibilidade de uma entrada de senha usando JavaScript simples.
Um campo de senha fornece uma maneira para os usuários inserirem uma senha com segurança, mostrando o *caractere em vez dos caracteres reais.
No entanto, é provável que alguns usuários digitem a senha errada. Para ajudá-los a ver a senha que estão digitando no momento, você pode adicionar um botão que permite alternar a visibilidade da senha.
Para tornar a senha visível, siga estas etapas:
- Primeiro, crie um
<input>elemento com o tipopassworde um ícone que permita aos usuários clicar nele para alternar a visibilidade da senha. - Segundo, vincule um manipulador de eventos ao evento click do ícone. Se o ícone for clicado, alterne o
typeatributo do campo de senha entretextepassword. A entrada com o tipotextmostrará a senha real. - Terceiro, altere o ícone para torná-lo mais fácil de usar. Esta etapa é opcional.
Para facilitar, usaremos dois ícones do ícone Bootstrap para alternar a visibilidade da senha.
O seguinte mostra o código HTML da página:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toggle Password Visibility</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<h1>Sign In</h1>
<form method="post">
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
<i class="bi bi-eye-slash" id="togglePassword"></i>
</p>
<button type="submit" id="submit" class="submit">Log In</button>
</form>
</div>
<script>
const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#password");
togglePassword.addEventListener("click", function () {
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);
// toggle the icon
this.classList.toggle("bi-eye");
});
// prevent form submit
const form = document.querySelector("form");
form.addEventListener('submit', function (e) {
e.preventDefault();
});
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )A página HTML possui um elemento de entrada com o tipo passworde um <i>elemento com as classes CSS fornecidas pelo Bootstrap CSS.
O Bootstrap CSS permite que você use a classe bi-eyedo <i>elemento para mostrar o ícone do olho. Para alterar o ícone de olho para barra, basta alterar a classe do <i>elemento parabi-eye-slash
Para colocar o ícone dentro da entrada da senha, você pode usar a margem negativa do <i>elemento da seguinte forma:
form i {
margin-left: -30px;
cursor: pointer;
}Linguagem de código: CSS ( css )O resto do CSS é direto.
No JavaScript:
Primeiro, selecione o ícone de alternância de senha e o campo de entrada de senha usando o querySelector()método:
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');Linguagem de código: JavaScript ( javascript )Em seguida, anexe um ouvinte de evento ao togglePasswordícone e alterne o typeatributo do campo de senha, bem como a classe do ícone :
togglePassword.addEventListener('click', function (e) {
// toggle the type attribute
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
// toggle the eye / eye slash icon
this.classList.toggle('bi-eye');
});Linguagem de código: JavaScript ( javascript )Para ver a página inteira, você pode conferir aqui .
