'How do i add a password visibility button inside input

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

javascriptc++sharp


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kureteiyu

Related Questions