tab键切换失效时，先检查tabindex是否为负数或被禁用；input等元素默认可聚焦，设tabindex="-1"会彻底退出焦点流，禁用应优先用disabled属性；tabindex="0"加入默认顺序，正数强制前置但不推荐混用；父容器tabindex="-1"、inert、css隐藏或移动端ios限制均会导致失效；需结合accessibility面板、getcomputedstyle、focusin事件及设备检测综合排查。
Tab键切换失效时，先检查tabindex是否为负数或被禁用
默认情况下，input、button、textarea等可交互元素天然支持Tab切换；但一旦手动设置tabindex="-1"，该元素就彻底退出焦点流——既不能通过Tab到达，也不能用.focus()主动聚焦（除非JS显式调用）。常见误操作是把tabindex="-1"当成“暂时禁用”，结果导致键盘导航断裂。
真正需要“跳过但保留JS聚焦能力”的场景，才用tabindex="-1"；若只是想禁用表单控件，应优先用disabled属性——它既阻止Tab进入，也禁用鼠标交互和提交值，语义更准确。
-
tabindex="0"：加入默认焦点顺序，位置由DOM顺序决定 -
tabindex="1"及以上：强制前置到焦点流开头，数值越小越靠前（1在2之前），但不建议混用正数——易引发维护混乱和屏幕阅读器误读 - 未声明
tabindex：取决于元素类型，input默认可聚焦，div默认不可聚焦
tabindex="0"不是万能钥匙，得看父容器是否截断焦点
即使给input设了tabindex="0"，如果它被包裹在div里且该div有tabindex="-1"或inert属性，或者父级设置了overflow: hidden且自身不可滚动，焦点仍可能无法抵达。更隐蔽的是CSS的visibility: hidden或display: none——前者让元素占位但不可聚焦，后者直接从渲染树移除，tabindex完全失效。
实操建议：用浏览器开发者工具的“Accessibility”面板检查元素的Focusable状态，比肉眼判断更可靠。
- 用
getComputedStyle(el).display !== "none"快速验证显示状态 - 避免对
input父容器设置tabindex，除非明确需要容器级焦点管理（如自定义下拉菜单） - 动态渲染的表单项（如Vue/React组件挂载后插入），需确保
tabindex在元素插入DOM后生效，而非仅写在模板字符串里
移动端iOS Safari对tabindex的支持有硬限制
iOS Safari默认只允许input、textarea、select、button获得焦点，其他元素即使设了tabindex="0"也无法通过硬件键盘Tab切换——这是WebKit的主动限制，与无障碍无关。这意味着div内嵌contenteditable="true"再加tabindex="0"，在iPhone上依然无法用Tab进入。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
绕过方案有限：要么改用原生表单控件，要么接受iOS用户必须点触激活（此时tabindex对桌面端和Android有效，iOS仅作降级兼容）。
- 检测环境：
/(iPad|iPhone|iPod)/.test(navigator.userAgent) - 不要依赖
tabindex实现iOS关键操作流，优先用input替代自定义编辑区域 -
tabindex="0"在iOS上对iframe内容页有效，但仅限同域且iframe本身可聚焦
用document.activeElement和focusin事件验证实际焦点行为
别只信HTML里的tabindex值，运行时焦点路径可能被JS干扰。比如某个input被blur()后立即focus()另一个元素，会导致Tab看起来“跳过”了中间项；或者全局监听keydown拦截了Tab键（event.preventDefault()），整个切换逻辑就瘫了。
最简验证法：
document.addEventListener("focusin", e => {
console.log("focused:", e.target.tagName, e.target.tabIndex);
});
配合document.activeElement实时查看当前焦点节点，比反复手点Tab更高效。
- 注意
focusin冒泡，而focus不冒泡——需要捕获父容器焦点变化时选focusin -
tabindex值不影响document.activeElement的返回结果，只影响能否到达该元素 - SPA路由切换后，焦点常停留在旧页面元素上，需手动
el.focus()重置，否则Tab流错乱
tabindex最常出问题的地方不在值本身，而在它和CSS可见性、JS焦点控制、移动端平台限制这三者的叠加效应。调的时候别只盯着一个属性改，得同步看渲染状态、事件监听和设备特性。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
