如何检测用户首次在密码框输入，规避浏览器自动填充触发事件

问题场景 #

需要实现密码输入框的可见性切换按钮，要求仅在用户手动输入内容后才启用该按钮，避免他人通过按钮查看浏览器自动填充的保存密码。但测试Chrome浏览器时，change、input、keyup事件会被浏览器自动填充操作触发，导致按钮提前启用。

解决方案思路 #

Chrome等浏览器的自动填充操作不会触发真实的用户交互事件，可通过以下方式区分：

• 使用事件对象的isTrusted属性：用户手动触发的事件isTrusted为true，浏览器自动触发的为false
• 提前绑定点击事件避免重复绑定，优化代码性能
• 页面加载后强制检查，防止自动填充误启用按钮

修改后的JavaScript代码 #

// password visibility toggles
document.querySelectorAll('.password-visibility-toggle').forEach((passwordVisibilityButton) => {
    const inputGroup = passwordVisibilityButton.closest('.input-group');
    const passwordInput = inputGroup.querySelector('input');
    
    // 提前绑定切换逻辑，避免重复绑定事件
    passwordVisibilityButton.addEventListener('click', () => {
        const isPasswordType = passwordInput.type === 'password';
        passwordInput.type = isPasswordType ? 'text' : 'password';
        // 用toggle简化类切换操作
        inputGroup.querySelector('.bi-eye').classList.toggle('d-none', !isPasswordType);
        inputGroup.querySelector('.bi-eye-slash').classList.toggle('d-none', isPasswordType);
    });

    // 监听input事件，仅处理用户手动输入
    passwordInput.addEventListener('input', (event) => {
        if (event.isTrusted && passwordInput.value.length > 0) {
            passwordVisibilityButton.disabled = false;
        }
    });

    // 页面加载后强制保持按钮禁用，覆盖自动填充的影响
    window.addEventListener('load', () => {
        passwordVisibilityButton.disabled = true;
    });
});

关键优化点 #

1. 事件绑定优化：提前绑定点击事件，避免每次输入重复绑定，减少内存消耗
2. 用户交互校验：通过event.isTrusted确保只有手动输入才启用按钮
3. 页面加载校验：强制重置按钮状态，防止浏览器自动填充导致按钮误启用
4. 简化DOM操作：用classList.toggle替代重复的add/remove操作，代码更简洁

备选方案（兼容特殊场景） #

若isTrusted在部分场景下不生效，可通过监听用户直接交互事件实现：

// 监听键盘输入或鼠标点击输入框的操作
const enableButtonOnUserAction = () => {
    if (passwordInput.value.length > 0) {
        passwordVisibilityButton.disabled = false;
        // 触发后移除监听，避免重复执行
        passwordInput.removeEventListener('keydown', enableButtonOnUserAction);
        passwordInput.removeEventListener('pointerdown', enableButtonOnUserAction);
    }
};

passwordInput.addEventListener('keydown', enableButtonOnUserAction);
passwordInput.addEventListener('pointerdown', enableButtonOnUserAction);

内容的提问来源于stack exchange，提问作者dqhendricks