How To Toggle Password Visibility

Learn How To Toggle Password Visibility using JavaScript.

Click below checkbox button to see the password visibility effect.

Password:

Show Password

Create Toggle Password Visibility

Step 1) Add HTML

Password: <input type="password" value="Password is Visible" id="myInputID"><br><br>
<input type="checkbox" onclick="myPassFunction()">Show Password

Step 2) Add JavaScript

<script>
function myPassFunction() {
    var i = document.getElementById("myInputID");
    if (i.type === "password") {
        i.type = "text";
    } else {
        i.type = "password";
    }
}
</script>

Complete Code

<!DOCTYPE html>
<html>

<body>

<p>Click on the radio button to toggle password visibility</p>

Password: <input type="password" value="Password is Visible" id="myInputID"><br><br>
<input type="checkbox" onclick="myPassFunction()">Show Password

<script>
function myPassFunction() {
    var i = document.getElementById("myInputID");
    if (i.type === "password") {
        i.type = "text";
    } else {
        i.type = "password";
    }
}
</script>

</body>
</html>

Try it Yourself! »