How do i add a password visibility button inside input

user_13137304 0
Viewed 73

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>

This is how it ends up looking

javascript c#
2 Answers

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"
    }
}
user_102103210

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>

user_150326880
Related