#45 - Show/Hide Password v0.2

Add a show/hide password button to any form with a password input.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #45 v0.2 💙 SHOW AND HIDE PASSWORD -->
<script>
  document.querySelectorAll("[ms-code-password='transform']").forEach(function(button) {
    button.addEventListener("click", transform);
  });

  var isPassword = true;

  function transform() {
    var passwordInputs = document.querySelectorAll("[data-ms-member='password'], [data-ms-member='new-password'], [data-ms-member='current-password']");

    passwordInputs.forEach(function(myInput) {
      var inputType = myInput.getAttribute("type");

      if (isPassword) {
        myInput.setAttribute("type", "text");
      } else {
        myInput.setAttribute("type", "password");
      }
    });

    isPassword = !isPassword;
  }
</script>

Description

Attribute

Show / Hide Password

Create a button to show/hide password inputs.

ms-code-password

transform

v0.2 - Multiple Password Inputs

Changed querySelector to querySelectorAll so that the password transformation works for multiple password inputs on the same page.

Also added support for data-ms-member="new-password" and data-ms-member="current-password".

Add ms-code-password="transform" to your show password button.

The 1st click will show the password and the 2nd click will hide the password. Which means, you can use Webflow interactions, a checkbox, or Webflow tabs to toggle between show & hide buttons.