Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
youremail@yourdomain.com
+88 (0) 101 0000 000
Follow Us

EG-Web

s

Toggle Password Visibility

How To – Toggle between password visibility with JavaScript.

Hiding passwords visibility in 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 article, we will show how to allow users to reveal their own passwords on input fields via checkbox.

 

Preview:
Password:


Code:
<!-- Password field -->
Password: <input id="password" type="password" value="FakePSW" placeholder="Enter your password"> <label for="pass-toggle">

<!-- An element to toggle between password visibility -->
<label for="pass-toggle">
     <input id="pass-toggle" type="checkbox" onclick="togglePassword();"> Show Password</label>
function togglePassword() {
	var x = document.getElementById("password");

	x.type = (x.type == "password" ? "text" : "password");
}

How this is going to work

When a user checks the show_password checkbox, we’ll get the password field and change it’s type from password to text. If they uncheck the box, we’ll switch it back to password.

Yeah, it’s that sample!