Hiding passwords visibility in web forms helps protect from people looking over your shoulder and reading your password, but greatly increases in the likelihood that someone will enter the wrong one.
In this tutorial you will learn to show and hide password on a web page using JavaScript.
Here’s a simple form with a password. I’ve also added a checkbox users can click to reveal or hide their password.
<!DOCTYPE html> <html> <head> <title>Toggle password visibility using JavaScript</title> </head> <body> <label id="lblPassword">Enter Password</label> <input id="txtPassword" type="password" class="form-control" /> <input id="checkbox1" type="checkbox" onclick="ShowHidePassword(this)" /> <label id="lblShowPassword">Show Password</label> </body> </html>
When a user checks the Show Password checkbox, the password field change it’s type from password to text. If they uncheck the box, it will switch back to password.
Yea, it’s really that simple!
Copy and paste the JavaScript code in you web form under head tag.
<script language="javascript" type="text/javascript"> function ShowHidePassword(obj) { if (obj.checked) { document.getElementById('txtPassword').type = 'text'; document.getElementById('lblShowPassword').innerHTML = 'Hide Password'; } else { document.getElementById('txtPassword').type = 'password'; document.getElementById('lblShowPassword').innerHTML = 'Show Password'; } } </script>