How TO – Toggle Password Visibility
Click the radio button to toggle between password visibility:
Password:
Show Password
Toggle between password visibility with JavaScript.
Toggle Password Visibility
Step 1) Add HTML:
Example
<!– Password field –>
Password: <input type=”password” value=”FakePSW” id=”myInput”>
<!– An element to toggle between password visibility –>
<input type=”checkbox” onclick=”myFunction()”>Show Password
Step 2) Add JavaScript:
Example
<!DOCTYPE html>
<html>
<body>
<p>Click the radio button to toggle between password visibility:</p>
Password: <input type=”password” value=”FakePSW” id=”myInput”><br><br>
<input type=”checkbox” onclick=”myFunction()”>Show Password
<script>
function myFunction() {
var x = document.getElementById(“myInput”);
if (x.type === “password”) {
x.type = “text”;
} else {
x.type = “password”;
}
}
</script>
</body>
</html>