Como apresentar e ocultar a senha no formulário cadastrar usuário
Neste tutorial, será mostrado como exibir e ocultar a senha no formulário de cadastro de usuário.
Primeiramente, será demonstrado como inserir um ícone no campo do formulário.
Em seguida, será explicado como substituir o ícone utilizando JavaScript.
Por fim, será apresentado como exibir e ocultar a senha no formulário.
Download do código fonte desenvolvido na aula: Download
Curso de PHP Developer: Mais Detalhes do Curso
Receber as aulas gratuitas do curso de PHP Developer: Acessar
Lista completa de aulas: Acessar
Para começar, é utilizado como base o projeto da aula "Como validar formulário com JavaScript e exibir mensagens de erro com SweetAlert2".
Em seguida, foi incluída a biblioteca de ícones Font Awesome.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">No arquivo "index.php", nos campos de senha e repetir senha, foi acrescentado o ícone.
<div class="password-container">
<input type="password" name="senha" id="senha" placeholder="Senha com mínimo 6 caracteres">
<span class="toggle-password" onclick="togglePassword('senha', this)">
<i class="fa-regular fa-eye"></i>
</span>
</div>
<div class="password-container">
<input type="password" name="rep_senha" id="rep_senha" placeholder="Confirmar a senha">
<span class="toggle-password" onclick="togglePassword('rep_senha', this)">
<i class="fa-regular fa-eye"></i>
</span>
</div>No arquivo "styles.css", foi acrescentado o CSS para alinhar o ícone no campo de senha.
.password-container{
position: relative;
}
.toggle-password{
position: absolute;
right: 10px;
top: 25%;
cursor: pointer;
color: #c0c0c0;
}Para finalizar, no arquivo "script.js", foi acrescentada a função para exibir e ocultar a senha, além do JavaScript para alterar o ícone no formulário.
// Apresentar e ocultar a senha e substituir o ícone
function togglePassword(fieldId, toggleIcon){
const field = document.getElementById(fieldId);
const icon = toggleIcon.querySelector('i');
if(field.type === "password"){
field.type = "text";
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash'); // Ícone de olho com traço (para senha visível)
} else {
field.type = "password";
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye'); // Ícone de olho sem traço (para senha oculta)
}
}Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!