如何为密码字段添加JavaScript eventListener监听浏览器自动生成密码事件

首选方案：替换keyup监听为input事件 #

input事件是W3C标准定义的、覆盖所有用户触发的输入值变更的事件，无论变更来源是键盘输入、粘贴内容、浏览器自动填充/自动生成密码、拖拽填入文本，只要输入框的value发生变化都会触发，完美覆盖你遇到的自动生成密码的场景。
示例实现代码：

const passwordInput = document.getElementById('password');
// 替换原有的keyup监听为input监听即可
passwordInput.addEventListener('input', function() {
  const currentPassword = this.value;
  // 在此处调用你的密码强度检测逻辑
  updatePasswordStrength(currentPassword);
});

该方案兼容所有主流现代浏览器（Chrome 1+、Firefox 3.5+、Safari 3.1+、Edge全版本），无额外性能开销，可覆盖99%以上的使用场景。

兜底兼容方案：值变更轮询 #

如果你的业务需要兼容极端老旧浏览器，或需要覆盖第三方密码管理器生成密码的特殊场景，可以搭配短间隔轮询作为兜底逻辑，确保无遗漏：

const passwordInput = document.getElementById('password');
let lastPassword = passwordInput.value;
// 200ms轮询间隔对性能无感知，完全满足实时检测的需求
setInterval(() => {
  const currentPassword = passwordInput.value;
  if (currentPassword !== lastPassword) {
    lastPassword = currentPassword;
    updatePasswordStrength(currentPassword);
  }
}, 200);

额外说明 #

你之前使用的change事件仅会在输入框失焦时触发，所以用户选择自动生成密码后未点击其他区域的场景下不会触发，完全不适合实时密码强度检测的需求，建议直接弃用。

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