How do i add a password visibility button inside input-CodePudding

This is part of my code.

<div >
        
    @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  id="togglePassword"></i>
</div>

This is how it ends up looking

CodePudding user response：

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

CodePudding user response：

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 >
  <label>Password: </label>
  <input type="password" id="password">
    <i  id="togglePassword"></i>
</div>