Toggle Password Visibility using JavaScript

Toggle Password Visibility using JavaScript

24-Sep-2022
| |
Image Carousel

Toggle Password Visibility is most commonly used in most sites to show you that you can crosscheck whether you have written the correct password. It is a very simple JavaScript code as you can see we created a function and in that function we have just called the document.getElementById in a variable and we will get what ever password is written in that input type.

Code for Toggle Password Visibility using JavaScript Copy

<!DOCTYPE html>
<html>
<body>
<h1>Toggle Password Visibility using JavaScript</h1>
<p>Click the radio button to toggle between password visibility:</p>
 
Password: <input type="password" value="Developer Corner" id="myInput"><br><br>
<input type="checkbox" onclick="togglepassword()">Show Password
 
<script>
function togglepassword() {
  var x = document.getElementById("myInput");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>
 
</body>
</html>

Output of Toggle Password Visibility 

Toggle Password Visibility using JavaScript

Click the radio button to toggle between password visibility:

Password:

Show Password

Tags: Toggle, Password, JavaScript,JavaScript,
Related Articles
Load More

Newsletter