bootstrapper - How do I get bootstrap bi-eye to work on two fields on the same page? - Stack Overflow

admin管理员组

文章数量:1122846

Please be gentle, I am new to this.

I have a password entry field and a password confirmation field on the same page.

I have he bootstrap bi-eye working for the password field, I want to add it for the confirmation field as well. How do I do this?

Here is the code I am using for the password field:

`<form method="post" action="process-reset-password.php" id="forgot2"     novalidate>
    <div>
    <input type="hidden" name="token" value="<?= htmlspecialchars($token) ?>">
    <label for="password">New password</label><br>
    <input type="password" name="password" id="password" autocomplete="off" />
    <i class="bi bi-eye-slash" id="togglePassword"></i>
    </div>
    <br>
    <div>
    <label for="password_confirmation">Repeat password</label><br>
    <input type="password" name="password_confirmation"                   id="password_confirmation" autocomplete="off" />
    <i class="bi bi-eye-slash" id="togglePassword"></i>
    </div>
    <br>
    <button>Send</button>
</form>
<script>
    const togglePassword = document
        .querySelector('#togglePassword');
    const password = document.querySelector('#password');
    togglePassword.addEventListener('click', (e) => {
        // Toggle the type attribute using
        // getAttribure() method
        const type = password
            .getAttribute('type') === 'password' ?
            'text' : 'password';
        password.setAttribute('type', type);
        // Toggle the eye and bi-eye icon
        e.target.classList.toggle('bi-eye');
    });
</script>   `

The bi-eye password show/hide works as expected for the password field. What do I need to add tp make it work for the password confirmation field?

I tried renaming the password variables to password_confirmation but with limited success. That revealed the password in the confirmation field, but wouldn't re-hide. This also had the undesired effect of no longer working in the password field.

本文标签： bootstrapperHow do I get bootstrap bieye to work on two fields on the same pageStack Overflow