Angular中如何实现输入框Tab聚焦与点击聚焦的差异化样式

• 鼠标点击输入框时的事件触发顺序为 mousedown -> focus -> mouseup -> click，原实现单独绑定focus和click事件时，会先触发focus逻辑切换为Tab高亮状态，再触发click逻辑切换为点击置灰状态，两次状态变更不仅会产生视觉闪烁，还会因为事件执行顺序固定出现逻辑错乱，控制台日志也会出现先打印not click再打印click的颠倒输出。
• 两类聚焦场景的本质差异：
  • Tab键触发的聚焦，是无指针上下文的键盘导航行为
  • 鼠标/触摸点击触发的聚焦，是带指针交互上下文的触发行为
• 原生API本身已经提供了区分两类触发来源的属性，不需要拆分绑定多个事件。

直接在focus事件回调中，通过原生FocusEvent的detail属性做场景分流，从根源上规避多事件绑定带来的顺序冲突：

• 键盘触发的聚焦事件（包括Tab导航），event.detail值固定为0
• 指针点击触发的聚焦事件，event.detail值会记录本次触发的点击次数（通常为1，双击场景为2）

调整后的代码 #

模板部分（移除多余的click绑定和内联事件） #

<input
  name="search"
  type="search"
  autocomplete="off"
  placeholder="Search"
  (focus)="handleSearchFocus($event)"
  (blur)="handleSearchBlur()"
  [class.tm-homepage-search-header__search-input--click]="isSearchTakeover"
  [class.tm-homepage-search-header__search-input--tab]="isSearchHighlight">

组件逻辑部分 #

export class HomepageSearchHeaderComponent {
  // 状态显式初始化为false，避免变更检测出现undefined异常
  public isSearchTakeover = false;
  public isSearchHighlight = false;

  public handleSearchFocus(event: FocusEvent): void {
    // 分流判断
    if (event.detail === 0) {
      // Tab聚焦场景：仅激活边框高亮
      this.isSearchHighlight = true;
      this.isSearchTakeover = false;
    } else {
      // 点击聚焦场景：激活整站置灰的接管模式
      this.isSearchTakeover = true;
      this.isSearchHighlight = false;
    }
    // 合并原内联事件的placeholder清空逻辑
    (event.target as HTMLInputElement).placeholder = '';
  }

  public handleSearchBlur(): void {
    // 失焦时统一重置所有状态
    this.isSearchTakeover = false;
    this.isSearchHighlight = false;
    // 恢复placeholder文本
    const inputEl = document.querySelector('input[name="search"]') as HTMLInputElement;
    inputEl.placeholder = 'Search';
  }
}

• 完全规避事件执行顺序带来的逻辑冲突，所有场景判断都在focus触发节点统一完成，不存在两次状态切换的闪烁问题
• 不需要额外监听click事件，逻辑更精简
• 兼容所有键盘导航触发的聚焦场景（包括Tab、Shift+Tab、方向键导航等），不需要单独适配按键逻辑

注：整站置灰的效果只需要在isSearchTakeover为true时，给全局内容容器绑定带半透明遮罩的样式类即可，组件状态统一管理，不需要额外操作DOM。

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