HTML inert 属性 模态背景不可交互与焦点管理实践

HTML inert 属性 模态背景不可交互与焦点管理实践概述`inert` 使元素及其后代变为不可交互（不可聚焦、不可点击、不可被查找），适用于模态弹窗场景的背景区域治理。核心概念与参数`inert` 全局属性：布尔属性，应用于任何元素以禁用其交互能力。`HTMLElement.inert`：JS 读写访问属性值，便于在弹窗显隐时切换。实践示例<main id="app">

<!-- 页面主体 -->

<button onclick="openModal()">打开弹窗</button>

</main>

<dialog id="modal">

<h2>标题</h2>

<p>内容...</p>

<button onclick="closeModal()">关闭</button>

</dialog>

<script>

const app = document.getElementById('app');

const modal = document.getElementById('modal');

function openModal() {

app.inert = true; // 背景不可交互

modal.showModal();

}

function closeModal() {

modal.close();

app.inert = false;

}

</script>

验证方法规范与支持：参考 MDN（HTML inert、HTMLElement.inert）与 HTML Standard，确认跨浏览器自 2023 年起的稳定支持。可访问性：验证键盘焦点被限制在模态内；读屏不会访问 inert 子树内容。兼容策略：在不支持的环境中回退到 `aria-hidden` 与 `tabindex="-1"` 组合策略。注意事项`inert` 不改变视觉展示，需配合样式遮挡背景以传达不可交互状态。不用于单个表单控件禁用，优先使用 `disabled`。弹窗关闭时确保恢复背景交互与标题、焦点状态更新。参考：MDN（HTML inert、HTMLElement.inert）、HTML Standard。