#Nr. 115 - Ein zufälliges Passwort generieren

Reibungslose Anmeldung. Verlangt oder erlaubt den Mitgliedern, in Zukunft ein Passwort festzulegen.

Video Tutorial

Loom
tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

44 lines
Paste this into Webflow
<!-- 💙 MEMBERSCRIPT #115 v0.1 💙 - GENERATE PASSWORD-->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var passwordInput = document.querySelector('[data-ms-member="password"]');
    
    if (passwordInput) {
        // Function to generate random password
        function generatePassword() {
            var timestamp = Date.now().toString(36);
            var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+{}[]|:;<>,.?/~';
            var randomChars = '';
            for (var i = 0; i < 16; i++) {
                randomChars += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return (timestamp + randomChars).slice(0, 32);
        }

        // Generate and set password
        passwordInput.value = generatePassword();

        // Block password managers and prevent editing
        passwordInput.setAttribute('autocomplete', 'off');
        passwordInput.setAttribute('readonly', 'readonly');

        // Prevent copy and paste
        passwordInput.addEventListener('copy', function(e) {
            e.preventDefault();
        });
        passwordInput.addEventListener('paste', function(e) {
            e.preventDefault();
        });

        // Prevent dragging
        passwordInput.addEventListener('dragstart', function(e) {
            e.preventDefault();
        });

        // Prevent context menu
        passwordInput.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });
    }
});
</script>

Tutorial

Dieses MemberScript bewirkt Folgendes:


It selects the password input field using the attribute data-ms-member="password".


The generatePassword() function creates a 32-character password by combining:


Der aktuelle Zeitstempel umgerechnet zur Basis 36


16 zufällige Zeichen (einschließlich Buchstaben, Zahlen und Symbole)


Es setzt das generierte Passwort als Wert des Eingabefeldes.


It blocks password managers by setting autocomplete="off".


It prevents editing by setting the input field as readonly.


Es wurden zusätzliche Ereignis-Listener hinzugefügt, um das Kopieren, Einfügen, Ziehen und Öffnen des Kontextmenüs auf dem Kennwortfeld zu verhindern.


To use this script, include it in your HTML file and ensure you have an input field with the attribute data-ms-member="password" where you want the password to be generated.

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in UX