#45 - Show/Hide Password

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

Custom Fields UX

Video Tutorial

Loom

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

24 lines

Paste this into Webflow

<!-- 💙 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='keywordnew-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>

Data Attributes

1 attribute

Attribute

Value

Description

true

—

No description

How to use attributes

Add these data attributes to your HTML elements in Webflow. For example: <div data-attribute="value">

Tutorial

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.