#45 - Show/Hide Password v0.2

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

Bekijk 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>

Het Make.com-scenario maken

1. Download de JSON blauwdruk hieronder om het te leren.

2. Navigeer naar Make.com en maak een nieuw scenario...

3. Klik op het kleine vakje met 3 stippen en vervolgens op Import Blueprint...

4. Upload je bestand en voila! Je bent klaar om je eigen accounts te koppelen.

Hulp nodig met deze MemberScript?

Alle Memberstack-klanten kunnen om hulp vragen in de 2.0 Slack. Houd er rekening mee dat dit geen officiële functies zijn en dat ondersteuning niet kan worden gegarandeerd.

Word lid van de 2.0 Slack
Versie-opmerkingen

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".

Attributen
Beschrijving
Attribuut
Show / Hide Password
Create a button to show/hide password inputs.
reveal, peak, confirm, peek, show/hide, hide/show,
ms-code-password
transform
transform
Les

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.

Wat is Memberstack?

Auth & betalingen voor Webflow sites

Voeg logins, abonnementen, gated content en nog veel meer toe aan uw Webflow site - eenvoudig en volledig aanpasbaar.

Meer informatie