Angular4+HTML5模态框：如何仅在弹窗内限制Tab键聚焦（无JS/JQuery）

嘿，针对你遇到的模态框焦点溢出问题，结合你的Angular4环境和纯HTML优先的需求，我有几个实用的方案：

方案1：改用HTML5原生<dialog>元素（最推荐，纯HTML实现） #

HTML5的<dialog>标签原生支持焦点捕获和无障碍特性，完全不需要额外JS就能实现Tab焦点在弹窗内循环：

<!-- 触发按钮（Angular4绑定写法） -->
<button (click)="modal.showModal()">打开弹窗</button>

<!-- 原生模态框 -->
<dialog #modal aria-labelledby="modalTitle">
  <h2 id="modalTitle">弹窗标题</h2>
  <p>弹窗内容区域</p>
  <input type="text" placeholder="输入框1">
  <input type="text" placeholder="输入框2">
  <button (click)="modal.close()">关闭弹窗</button>
</dialog>

• 当调用showModal()打开弹窗时，浏览器会自动将焦点移到弹窗内的第一个可聚焦元素，连续按Tab时焦点只会在弹窗内的元素间循环，绝不会跑到背景页面。
• 它原生自带aria-modal的语义（无需手动添加），配合aria-labelledby关联标题，完美满足无障碍需求。
• 适配Angular4的模板语法，用模板变量#modal替代原生DOM选择器，符合项目开发习惯。

方案2：基于现有role="dialog"的纯HTML优化（局限性说明） #

如果你因为项目限制不能改用原生<dialog>，纯HTML层面只能做部分体验优化——因为完整的焦点循环逻辑本质需要JS支持，但可以通过以下方式提升无障碍性：

• 给弹窗容器添加aria-modal="true"，告诉屏幕阅读器忽略背景页面内容；
• 给弹窗内的可聚焦元素设置合理的tabindex，确保Tab顺序符合用户操作逻辑：

  <div role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <h2 id="modalTitle">弹窗标题</h2>
    <input type="text" tabindex="1" placeholder="输入框1">
    <button tabindex="2">操作按钮</button>
    <button tabindex="3">关闭按钮</button>
  </div>
  

注意：纯HTML无法实现完整的焦点“循环捕获”（比如按Tab到最后一个元素后，再按Tab回到第一个），也无法彻底阻止焦点跳到背景页面。如果必须实现完整的焦点管理，还是需要少量Angular代码监听键盘事件，但你明确要求不用JS，所以优先推荐原生<dialog>方案。

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