How to Show/Hide i.e. Toggle Password visibility using jQuery and JavaScript?

While filling up a password input field, there comes a situation where we want to see what we have typed till now. To see that, there is a checkbox click on which makes the characters visible. In this article we will see how to Hide/Show passwords using both JavaScript and jQuery.

Example

Html page=>

<!-- Password field -->
Password: <input type="password" value="FakeNicePSW" id="myPasswordInput">

<!-- An element to toggle between password visibility -->
<input type="checkbox" onclick="showPassword()">Show Password

JavaScript approach=>

function showPassword() {
   var x = document.getelementbyid("myPasswordInput");
   if (x.type === "password") {
       x.type = "text";
   } else {
       x.type = "password";
   }
}

jQuery approach=>

function showPassword() {
  var x = $("#myPasswordInput");
  if (x.attr("type") === "password") {
      x.prop("type", "text");
  } else {
      x.prop("type", "password");
  }
}