1Password致Angular输入框Tab切换时OnBlur事件不触发的解决咨询

问题背景 #

Chrome浏览器中使用1Password密码管理器扩展时，Angular站点的输入框出现异常：通过Tab/Shift+Tab切换失去焦点时，blur事件无法触发；但点击输入框外部使其失焦时，事件正常触发。禁用1Password的自动填充凭据设置后，blur事件恢复正常。

当前临时方案是同时监听blur和Tab按键事件来触发处理逻辑，但会导致未使用1Password的用户触发两次onBlur函数，需要更优解决办法。临时方案代码如下：

<input #input
    (focus)="onFocus()"
    (keydown.tab)="onBlur()"
    (keydown.shift.tab)="onBlur()"
    (blur)="onBlur()">

优化解决方案 #

方案1：添加1Password忽略属性（推荐，若输入框无需自动填充） #

1Password支持通过data-1p-ignore属性跳过对输入框的自动填充干预，直接从根源避免事件冲突：

<input #input
    data-1p-ignore="true"
    (focus)="onFocus()"
    (blur)="onBlur()">

添加该属性后，1Password不会对该输入框进行任何自动填充相关操作，blur事件即可正常触发，无需额外处理Tab按键。

方案2：改用focusout事件替代blur #

focusout是冒泡事件，而blur不冒泡，1Password的扩展逻辑可能未拦截focusout事件。替换后无需监听Tab按键：

<input #input
    (focus)="onFocus()"
    (focusout)="onBlur()">

测试验证该事件在Tab切换失焦时是否能正常触发，若有效则是最简洁的解决方式。

方案3：检测1Password环境，仅在对应环境下补充Tab事件监听 #

通过检测页面中1Password注入的标识元素，判断当前是否处于1Password环境，仅在该环境下绑定Tab按键的处理逻辑，避免非1Password用户重复触发onBlur：

组件中添加检测方法：

is1PasswordActive(): boolean {
  // 检测页面是否存在1Password注入的标识
  return document.querySelector('[data-1p-origin]') !== null || 
         document.querySelector('.1password') !== null;
}

handleKeydown(event: KeyboardEvent) {
  if ((event.key === 'Tab' || (event.shiftKey && event.key === 'Tab')) && this.is1PasswordActive()) {
    this.onBlur();
  }
}

模板修改为：

<input #input
    (focus)="onFocus()"
    (blur)="onBlur()"
    (keydown)="handleKeydown($event)">

这样只有在1Password环境下，Tab切换才会额外触发onBlur，普通用户不会出现重复触发问题。

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