能，但仅限于通过 focus() 方法主动调用——它不会出现在自然 tab 键导航流中，也不会被屏幕阅读器按顺序朗读，是实现“程序化聚焦但不干扰键盘导航”的核心机制。
tabindex="-1" 能让元素被 JavaScript 聚焦吗？
能，但仅限于通过 focus() 方法主动调用——它不会出现在自然 Tab 键导航流中，也不会被屏幕阅读器按顺序朗读。这是实现“程序化聚焦但不干扰键盘导航”的核心机制。
为什么不能用 tabindex="0" 替代？
tabindex="0" 会让元素进入标准 Tab 流，用户按 Tab 键时会停在它上面；而 tabindex="-1" 完全跳过它。常见误用场景：
• 模态框打开后想聚焦第一个输入框，但又不想让用户意外 tab 出去
• 动态插入的提示区域（如 toast）需要键盘操作触发，但不应打断当前焦点流
• 自定义下拉菜单的触发按钮需可 focus，但菜单项本身只响应鼠标/键盘快捷键，不参与 Tab 导航
focus() 调用失败的三个典型原因
即使设置了 tabindex="-1"，element.focus() 仍可能静默失败：
- 元素未渲染完成（比如刚
appendChild就调 focus）→ 改用requestAnimationFrame或setTimeout(..., 0)延迟 - 元素被
display: none或visibility: hidden隐藏 →focus()对隐藏元素无效，需确保offsetParent !== null且可见 - 父容器有
overflow: hidden且元素超出视口 → 浏览器可能拒绝聚焦，建议配合element.scrollIntoView({ block: 'nearest' })
React/Vue 中的注意事项
框架的异步更新机制会让直接在状态更新后调 focus() 失效：
- React：用
useEffect+ref，且依赖数组必须包含触发聚焦的 state 变量 - Vue：在
nextTick内调用ref.value?.focus()，避免 DOM 未更新 - 都需检查 ref 是否已绑定（
ref.value != null），尤其在条件渲染区块内
别忘了加 onKeyDown 监听 Enter 或 Space 来补全可访问性——tabindex="-1" 本身不提供任何交互逻辑，只是打开了 focus 通道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
