This is part of my code.
<div class="col-md-6">
@Html.Label("Respuestas * (Máximo 50 caracteres)", new { @class = "control-label" })
@Html.PasswordFor(m => m.PasswordAnswer, new { @class = "form-control", maxlength = 50, type = "text" })
<i class="fa fa-eye-slash" id="togglePassword"></i>
</div>
Your password input will need to have the type password to hide it.
Your button would toggle between the type password and the type text, using javascript.
function togglePasswordVisibility() {
let e = document.getElementById("togglePassword")
if (e.type == "password") {
e.type = "text"
} else {
e.type = "password"
}
}
In the solution below, the user input is hidden by default, as the type attribute of the <input> element is password. Clicking on the <i> will both change the class applied to the <i> and make the password visible.
const icon = document.getElementById('togglePassword');
let password = document.getElementById('password');
/* Event fired when <i> is clicked */
icon.addEventListener('click', function() {
if(password.type === "password") {
password.type = "text";
icon.classList.add("fa-eye-slash");
icon.classList.remove("fa-eye");
}
else {
password.type = "password";
icon.classList.add("fa-eye");
icon.classList.remove("fa-eye-slash");
}
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
<div class="col-md-6">
<label>Password: </label>
<input type="password" id="password">
<i class="fa fa-eye" id="togglePassword"></i>
</div>