Angular 14实现模态框内Tab导航循环，阻止焦点移出

一、现成方案：Angular Material Dialog #

如果你的项目使用Angular Material，它的MatDialog组件已经内置焦点捕获与Tab循环功能，完全匹配你需要的WPF KeyboardNavigation.TabNavigation="Cycle"效果：

• 模态框打开时自动锁定焦点在框内
• 按Tab键仅在模态框内的交互元素（按钮、输入框、下拉框等）间循环切换
• 关闭模态框后自动将焦点还原到触发打开的元素

无需额外配置，直接按官方方式调用即可：

import { MatDialog } from '@angular/material/dialog';
import { MyModalComponent } from './my-modal.component';

constructor(private dialog: MatDialog) {}

openModal() {
  this.dialog.open(MyModalComponent);
}

二、自定义实现（无Material依赖时） #

如果不使用Material，可以编写Angular指令来实现焦点锁定与Tab循环：

1. 创建焦点循环指令 #

import { Directive, ElementRef, HostListener, OnInit } from '@angular/core';

@Directive({
  selector: '[appTabCycle]'
})
export class TabCycleDirective implements OnInit {
  private focusableElements: HTMLElement[] = [];
  private firstElement: HTMLElement | null = null;
  private lastElement: HTMLElement | null = null;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    // 筛选模态框内所有可聚焦元素
    this.focusableElements = Array.from(
      this.el.nativeElement.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      )
    ) as HTMLElement[];
    this.firstElement = this.focusableElements[0];
    this.lastElement = this.focusableElements.at(-1) || null;
    
    // 初始化时自动聚焦第一个元素
    this.firstElement?.focus();
  }

  @HostListener('keydown', ['$event'])
  handleTabNavigation(event: KeyboardEvent) {
    if (event.key !== 'Tab') return;

    // 处理Tab循环逻辑
    if (event.shiftKey) {
      // Shift+Tab：焦点在第一个元素时跳转到最后一个
      if (document.activeElement === this.firstElement) {
        event.preventDefault();
        this.lastElement?.focus();
      }
    } else {
      // Tab：焦点在最后一个元素时跳转到第一个
      if (document.activeElement === this.lastElement) {
        event.preventDefault();
        this.firstElement?.focus();
      }
    }
  }
}

2. 在模态框组件中应用指令 #

<div class="modal-container" appTabCycle>
  <!-- 模态框内的交互元素 -->
  <input type="text" placeholder="输入项1">
  <button>确认</button>
  <input type="text" placeholder="输入项2">
  <button>取消</button>
</div>

三、关于tabindex无效的问题说明 #

你遇到的「设置大tabindex仍会移出模态框」问题，核心原因是：

• tabindex仅用于调整元素的Tab遍历顺序，无法限制焦点在指定容器内
• 浏览器默认Tab逻辑会遍历页面所有可聚焦元素，无论tabindex大小，遍历到最后一个后会跳回页面开头
• 必须通过监听Tab按键事件，手动阻止默认行为并控制焦点跳转，才能实现容器内的循环导航

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