tabindex="-1" 使元素可编程聚焦但不参与Tab顺序，不能替代disabled；disabled则彻底禁用交互、提交和焦点。
tabindex="-1" 不是禁用元素的键盘聚焦，而是让它“可被脚本聚焦但不进 Tab 流”——把它当禁用开关用，八成会出问题。
tabindex="-1" 为什么不能替代 disabled
给 <button> 或 <input> 加 tabindex="-1"，它依然能点、能提交、能触发 click 事件，只是按 Tab 键跳过了。这跟 disabled 的语义和行为完全不同：
-
disabled后元素彻底退出焦点管理，.focus()失效，表单不提交，样式自动变灰 -
tabindex="-1"不影响任何交互逻辑，也不改变视觉状态，更不会阻止屏幕阅读器读取内容 - 若目标是“让按钮暂时不可用”，必须用
disabled；若目标是“不让用户 Tab 进来，但代码里要 focus 它”，才用tabindex="-1"
哪些场景真该用 tabindex="-1"
它只在需要“程序化接管焦点入口”的时候才有意义，且几乎都发生在非原生可聚焦元素上：
- 模态框（
<div role="dialog">）打开后，对关闭按钮调用.focus()→ 该按钮需有tabindex="-1"（否则默认不可聚焦） - 下拉菜单容器（
<div class="dropdown">）本身不参与 Tab，但内部选项要支持键盘导航 → 容器设tabindex="-1"，展开时再focus()到首个<button> - 锚点定位：
<section id="faq">是普通区块，用location.hash跳转后想滚入视口并触发读屏 → 必须加tabindex="-1"才能element.focus()
常见失焦失败原因：不是浏览器不支持
调用 .focus() 后没反应？大概率不是兼容性问题，而是运行时条件没满足：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 元素还没挂载到 DOM（比如在
display: none容器里、或 React/Vue 组件尚未渲染完成） - 父级用了
inert属性，或手动移除了所有子元素的tabindex - 移动端 Safari 要求
.focus()必须在用户手势（如click、keydown）的同步上下文中执行，异步延迟（如setTimeout）会静默失败 - 焦点被其他逻辑抢走：比如 Modal 组件自带 focus trap，在你
focus()后立刻又被重定向到首项
focus() 时页面滚动怎么防
默认 .focus() 会强制滚动使元素进入视口，长列表或固定头部布局里容易“跳闪”：
- Chrome 86+ 支持
element.focus({preventScroll: true})，但 Safari 目前完全不认这个参数（调用不报错，但滚动照常发生） - 稳妥写法是先检测：
if ('preventScroll' in FocusOptions.prototype) { element.focus({preventScroll: true}); } else { element.focus(); } - 注意：
preventScroll不解决元素不可见的问题——如果它被display: none或visibility: hidden隐藏，.focus()仍会失败
真正容易被忽略的是：tabindex="-1" 只管“Tab 键能不能到”，不管“元素是不是可用”“屏幕阅读器读不读”“样式显不显示”。把它的作用域搞错，后续所有键盘导航和可访问性补救都会跑偏。
