如何檢測用戶何時開始在密碼字段中輸入文本，而不被瀏覽器自動填充/自動完成觸發

Question

我已經查看了堆棧上的類似問題，但沒有找到我正在尋找的答案。

我有一個密碼字段，其中有一個按鈕可以切換密碼的可見性，因此用戶可以確保在需要時沒有拼寫錯誤。 但是，我不希望這個按鈕被其他可能訪問同一台計算機的人用來查看人們保存的密碼。

所以我的解決方案是，在用戶在密碼字段中輸入內容之前不啟用此可見性切換按鈕。 但是，我無法弄清楚如何做到這一點，因為我用來確定用戶何時開始輸入的任何事件，在自動填充/自動完成時也會被瀏覽器使用。 我已經嘗試了更改、輸入和 keyup 事件，一旦字段變得可見並且自動填充保存的密碼，它們中的每一個似乎都會被瀏覽器自動觸發。 目前使用 Chrome 進行測試。

html：

            <div class="input-group">
                <input type="password" class="form-control needs-validation" id="sign-up-password" name="sign_up_password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
                <button type="button" class="btn btn-secondary password-visibility-toggle" disabled>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash d-none" viewBox="0 0 16 16">
                        <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
                        <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
                        <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
                    </svg>
                </button>
            </div>

javascript

// password visibility toggles
document.querySelectorAll( '.password-visibility-toggle' ).forEach( ( passwordVisibilityButton ) => {
    const inputGroup = passwordVisibilityButton.closest( '.input-group' );
    const passwordInput = inputGroup.querySelector( 'input' );
    passwordInput.addEventListener( 'change', ( event ) => {
        console.log( 'test' );
        if ( passwordVisibilityButton.disabled ) {
            passwordVisibilityButton.disabled = false;
            passwordVisibilityButton.addEventListener( 'click', ( event ) => {
                if ( passwordInput.getAttribute( 'type' ) == 'password' ) {
                    passwordInput.type = 'text';
                    inputGroup.querySelector( '.bi-eye' ).classList.add( 'd-none' );
                    inputGroup.querySelector( '.bi-eye-slash' ).classList.remove( 'd-none' );
                } else {
                    passwordInput.type = 'password';
                    inputGroup.querySelector( '.bi-eye' ).classList.remove( 'd-none' );
                    inputGroup.querySelector( '.bi-eye-slash' ).classList.add( 'd-none' );
                }
            } );
        }
    } );
} );

此代碼僅在用戶輸入任何內容並啟用切換按鈕之前觸發。 任何解決問題的想法或建議表示贊賞。 如果這很重要，也使用引導程序 5.2。

Answer 1

現在看來input type="password"的行為完全在瀏覽器控制之下。 值得慶幸的是， input type="text"仍然是自由的，我們可以隨意使用它。 因此，我們可以創建自己的密碼字段，而不是與之抗爭，盡管沒有密碼管理器功能，這在公共計算機上並不是我們真正想要的。 所以，這里是：

 const toggleMap = {show: 'hide', hide: 'show'}; const group = document.querySelector( '.input-group' ); const password = group.querySelector( '#sign-up-password' ); const passmask = group.querySelector( '#sign-up-passmask' ); const toggle = group.querySelector( '.password-visibility-toggle' ); toggle.addEventListener( 'click', () => { group.dataset.toggle = toggleMap[group.dataset.toggle]; }); password.addEventListener( 'input', event => { const value = event.target.value; passmask.value = value.replace(/./g, '*'); if (toggle.disabled =.value.length) group.dataset;toggle = 'hide'; });

 .input { position: relative; }.input > input { font-family: monospace; } #sign-up-password, #sign-up-password::selection { background: transparent; caret-color: black; } #sign-up-password::selection { background: #F236; } #sign-up-passmask { position: absolute; display: flex; z-index: -1; top: 0; border-color: transparent; }.input-group[data-toggle='hide'] >.password-visibility-toggle >.bi-eye, .input-group[data-toggle='show'] >.password-visibility-toggle >.bi-eye-slash { display: none; }.input-group[data-toggle='hide'] #sign-up-password, .input-group[data-toggle='show'] #sign-up-passmask { color: transparent; }

 <div class="input-group" data-toggle="hide"> <span class="input"> <input type="text" class="form-control needs-validation" id="sign-up-password" name="sign_up_password" pattern="(?=.*\d)(?=.*[az])(?=.*[AZ]).{8,}" required> <input type="text" id="sign-up-passmask"> </span> <button type="button" class="btn btn-secondary password-visibility-toggle" disabled> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16"> <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/> <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash d-none" viewBox="0 0 16 16"> <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/> <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/> <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12.708-.708 12 12-.708.708z"/> </svg> </button> </div>