#45 - Show/Hide Password v0.2

Fügen Sie jedem Formular mit einer Passworteingabe eine Schaltfläche zum Ein-/Ausblenden des Passworts hinzu.

Demo ansehen

<!-- 💙 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>

Erstellen des Make.com-Szenarios

1. Laden Sie den JSON-Blaupause unten, um angegeben zu bekommen.

2. Navigieren Sie zu Make.com und erstellen Sie ein neues Szenario...

3. Klicken Sie auf das kleine Kästchen mit den 3 Punkten und dann auf Blaupause importieren...

4. Laden Sie Ihre Datei hoch und voila! Sie sind bereit, Ihre eigenen Konten zu verknüpfen.

Brauchen Sie Hilfe mit diesem MemberScript?

Alle Memberstack-Kunden können im 2.0 Slack um Unterstützung bitten. Bitte beachten Sie, dass dies keine offiziellen Funktionen sind und der Support nicht garantiert werden kann.

Treten Sie dem 2.0 Slack bei
Anmerkungen zur Version

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

Attribute
Beschreibung
Attribut
Show / Hide Password
Create a button to show/hide password inputs.
reveal, peak, confirm, peek, show/hide, hide/show,
ms-code-password
transform
transform
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.

Was ist Memberstack?

Autorisierung und Zahlungen für Webflow-Websites

Fügen Sie Ihrer Webflow-Website Logins, Abonnements, Gated Content und vieles mehr hinzu - einfach und vollständig anpassbar.

Mehr erfahren