本文讲解如何利用原生 focus/blur 事件配合 ngClass 或 ngStyle，实现元素在键盘 Tab 导航聚焦时显示、失焦时隐藏的可访问性友好方案，避免手动监听 document 级 Tab 键的复杂逻辑与边界问题。
本文讲解如何利用原生 focus/blur 事件配合 `ngClass` 或 `ngStyle`，实现元素在键盘 Tab 导航聚焦时显示、失焦时隐藏的可访问性友好方案，避免手动监听 document 级 Tab 键的复杂逻辑与边界问题。
在 Angular 应用中，若需响应用户通过 Tab 键导航至某元素（即获得键盘焦点）并动态控制其可见性，不应依赖全局 document:keydown.tab 监听器——该方式存在严重缺陷：无法精准识别目标元素是否真正“获得焦点”，易误触发；无法区分正向/反向 Tab；且 blur 时机难以捕获，导致“移出时移除样式”逻辑失效。
✅ 正确做法是：直接绑定元素自身的 focus 和 blur 事件，结合 Angular 的响应式模板指令完成状态驱动渲染。
✅ 推荐实现方式（语义清晰、可访问性强、无副作用）
<!-- 使用 ngClass 控制 CSS 类切换 -->
<span class="test" tabindex="0" isfocused true false>
Hello from {{ name }}!
</span>
<!-- 或使用 ngStyle 直接控制内联样式 -->
<h1 tabindex="0" isfocused : true false>
Hello from {{ name }}!
</h1>
@Component({
// ... 其他配置
template: `<!-- 如上 -->`,
styles: [
`
.test { background-color: lightblue; }
.d-block { display: block; }
`
]
})
export class AppComponent {
name = 'Angular';
isFocused = false;
}
? 关键说明：
tabindex="0"是必需的——它使非交互元素（如、）可被键盘 Tab 聚焦，符合 WCAG 可访问性标准；focus/blur事件天然匹配键盘导航行为（包括 Shift+Tab 反向切换），无需额外判断event.key；ngClass更推荐用于样式复用场景（如 Bootstrap 的d-block），而ngStyle适合简单内联样式控制；- 若需同时支持鼠标悬停（hover）效果，可叠加
(mouseenter)/(mouseleave)事件，但注意：键盘用户不触发 mouse 事件，因此focus/blur是无障碍刚需，不可省略。
⚠️ 注意事项与避坑指南
❌ 不要用
document:keydown.tab全局监听：
它无法区分哪个元素被聚焦，且 Tab 键本身不携带 target 信息（event.target在 document 级监听中常为 body），极易造成样式错乱或内存泄漏。✅ 确保元素可聚焦：
原生可聚焦元素（、、）默认支持focus/blur；非交互元素必须添加tabindex（推荐tabindex="0"，保持自然 Tab 顺序）。? 进阶：封装为可复用指令（可选）
若多处需同类行为，可创建结构型指令如appFocusVisible，内部监听focusin/focusout并动态添加/移除类，进一步提升代码复用性与可维护性。
@Directive({
selector: '[appFocusVisible]',
host: {
'(focus)': 'onFocus()',
'(blur)': 'onBlur()'
}
})
export class FocusVisibleDirective {
private el: HTMLElement;
constructor(private renderer: Renderer2, elRef: ElementRef) {
this.el = elRef.nativeElement;
}
onFocus() {
this.renderer.addClass(this.el, 'd-block');
}
onBlur() {
this.renderer.removeClass(this.el, 'd-block');
}
}
? 总结：聚焦显隐的本质是状态同步，而非事件拦截。Angular 的声明式数据绑定 + 原生 DOM 焦点事件，是最轻量、最可靠、最符合无障碍规范的实现路径。抛弃“监听 Tab 键”的思维定式，拥抱
focus/blur+ngClass组合，让代码更健壮、更可测、更可持续。
