inert 通过布尔属性 element.inert = true 使元素及其后代彻底退出焦点流和可访问性树，需手动聚焦模态框内首可聚焦元素，并在不支持浏览器中用 aria-hidden、tabIndex=-1 和 focusin 拦截降级。
inert 怎么锁死键盘焦点流
它不是“阻止 Tab”，而是让浏览器彻底从焦点顺序中移除整个子树——inert 元素及其所有后代不会出现在 document.activeElement 链路里，也不会被 Tab、Shift+Tab、Arrow 键导航到。
常见错误现象：模态框弹出后，用户仍能 Tab 进背景里的 <input>，甚至触发 Enter 提交；或焦点卡在不可见区域，按 Tab 没反应。
- 必须只对主内容容器设
mainContent.inert = true，不能设document.body.inert = true - 确保模态框（如
<dialog>或自定义<div class="modal">）在 DOM 中与该容器同级，不在其内部 - 若用 SSR（如 Next/Astro），服务端渲染 HTML 时就要带
inert属性，否则 hydration 后 JS 赋值会触发 “prop mismatch” -
inert不会自动把焦点移到模态框内——你得手动modal.querySelector('button, input, [tabindex]')?.focus()
为什么 setAttribute('inert', '') 完全没用
浏览器只认 HTMLElement.prototype.inert 这个布尔属性，setAttribute 写的是 DOM 属性（attribute），而 inert 的行为由 JS 属性（property）控制。写成 el.setAttribute('inert', 'true') 或 el.toggleAttribute('inert')，DOM 上看着有，但行为零响应。
- ✅ 正确：
mainContent.inert = true—— 立即退出当前焦点、阻断键盘事件冒泡、从可访问性树中移除 - ❌ 无效：
el.setAttribute('inert', '')、el.setAttribute('inert', 'true')、el.inert = 'true'（字符串赋值） - ⚠️ 注意：
inert是布尔属性，HTML 中写成<main inert>即生效，不加引号、不带值；JS 中必须用true/false布尔值
虚拟键盘弹出时 keyboard 焦点为什么会“漏”
移动端调用 VirtualKeyboard API（比如 input.focus() 触发键盘）会重排 viewport、重计算焦点流和可访问性树，某些浏览器（尤其是 Safari 17.x 和旧版 Chrome WebView）会在键盘收起后丢失 inert 的状态同步，导致部分元素恢复可聚焦。
立即学习“前端免费学习笔记（深入）”；
- 必须监听
virtualkeyboard事件（如virtualkeyboardhide），并在回调中显式重置：mainContent.inert = isModalOpen - 不要依赖
resize或focusin事件兜底——它们触发时机不可靠，且可能造成循环 - 若框架使用 React/Vue，需在
useEffect或onMounted中绑定并清理该监听，避免重复注册
旧浏览器怎么兜底键盘禁用
Safari 17 及更早、部分安卓 WebView 完全不识别 inert，polyfill（如 @webcomponents/inert）无法 100% 模拟焦点退出和 AT 树移除，必须手动降级。
- 检测支持：
if (!('inert' in HTMLElement.prototype)) { /* 降级逻辑 */ } - 对目标容器设：
container.setAttribute('aria-hidden', 'true')+container.tabIndex = -1 - 递归遍历所有可聚焦子元素（
button、a[href]、input、[tabindex]），逐个设el.tabIndex = -1 - 监听
focusin，一旦焦点落入禁用区域，立即event.preventDefault()并safeFocusTarget.focus() - 别省略
pointer-events: none和user-select: none—— 它们防鼠标/触摸误触，但不替代键盘兜底
真正容易被忽略的是：inert 不是 CSS 效果，也不是事件拦截器；它是让浏览器“忘记”那一块 DOM 存在——所以兼容性兜底不是锦上添花，而是必须覆盖的执行路径。
