密码找回输入框：JS/jQuery捕获缓存邮箱选择事件的方法咨询

嘿，我明白你遇到的问题了——浏览器的自动填充/缓存邮箱列表选择（包括用Tab键选中的情况）确实是个让人头疼的点，因为它不像用户手动输入那样会触发常规的keyup或change事件。你当前绑定的事件里，change需要输入框失去焦点才会触发，keyup只对物理按键抬起有反应，而浏览器的缓存选择属于原生行为，很多时候绕开了这些常规事件。

下面是针对这个问题的有效解决方案：

优先使用input事件 #

input事件是目前覆盖范围最广的内容变更事件，它会在输入框的内容发生任何变化时触发——包括手动输入、粘贴、浏览器自动填充、从缓存列表选择（不管是鼠标点击还是Tab选中）。把你的事件绑定换成它，基本能解决大部分场景：

$("#input_emailResetpassword").on('input', function (e) {
  if ($form_changepassword.valid()) {
    $buttonResetPass.removeAttr('disabled');
  } else {
    // 记得在验证不通过时重新禁用按钮，避免状态不一致
    $buttonResetPass.attr('disabled', 'disabled');
  }
});

补充处理页面加载时的自动填充 #

有些浏览器（比如Chrome）会在页面加载完成后自动填充表单，这时候input事件可能不会触发。你可以通过监听浏览器给自动填充输入框添加的样式变化事件来捕捉这种情况，比如animationstart或transitionstart：

// 处理页面加载时的自动填充
$("#input_emailResetpassword").on('animationstart transitionstart', function() {
  setTimeout(() => {
    if ($form_changepassword.valid()) {
      $buttonResetPass.removeAttr('disabled');
    }
  }, 100);
});

// 结合input事件处理动态变更
$("#input_emailResetpassword").on('input', function (e) {
  if ($form_changepassword.valid()) {
    $buttonResetPass.removeAttr('disabled');
  } else {
    $buttonResetPass.attr('disabled', 'disabled');
  }
});

为什么你原来的事件组合不生效？ #

• blur：只有输入框失去焦点时才触发，用户从缓存列表选完邮箱如果没点击其他地方，按钮不会启用
• keyup：只对用户手动按下并抬起键盘按键有反应，Tab选中缓存项时不会触发对应的keyup（因为Tab是切换焦点的按键，不是修改内容的）
• change：同样需要输入框失去焦点才会触发，和blur类似的问题
• click：如果用户用鼠标点击缓存列表项，可能会触发，但Tab选中时完全不会触发

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