表格中textarea的Tab顺序严格按HTML源码DOM顺序执行，与视觉排版无关；默认tabindex="0"，禁用正数tabindex；动态插入需JS手动聚焦并滚动可视。
表格里 <textarea></textarea> 的 Tab 顺序默认就是按 DOM 顺序走
浏览器根本不管你在表格里怎么排版，只认 HTML 源码中 <textarea></textarea> 出现的先后位置。比如第1行第1列的 <textarea></textarea> 写在最前面，它就是第一个被 Tab 到的；第2行第3列那个写在后面，就排得靠后。不需要给它加 tabindex，原生 <textarea></textarea> 默认等价于 tabindex="0"。
常见错误是以为“视觉上从左到右、从上到下”就等于“Tab 顺序”，结果用 CSS flex 或 grid 把列顺序调乱了，DOM 却还是老样子——用户一按 Tab，焦点直接跳到源码里下一个 <textarea></textarea>，可能跨三行、跳两列，完全不符合预期。
- 如果设计稿要求“先填所有姓名列，再填所有邮箱列”，别给每个
<textarea></textarea>硬设tabindex="1"、tabindex="2"——这会让 Safari 忽略、React 渲染后错位、屏幕阅读器误读起点 - 正确做法是调整 HTML 结构：把所有姓名
<td><textarea></textarea></td>集中写在前面，邮箱的集中写在后面，哪怕视觉上它们分属不同列 - 若必须保持当前 DOM 结构，就用 CSS
order控制视觉排列，不碰 HTML 顺序
想让 Tab 先进 <tr> 再进 <code><textarea></textarea>？别这么干
有人试过给 <tr> 加 <code>tabindex="0"，再让里面 <textarea></textarea> 按方向键切换——这思路没错，但实际会破坏默认 Tab 流。因为 <tr tabindex="0"> 本身会抢一个 Tab 位，用户按一次 Tab 先聚焦整行（看不见反馈，除非你写了 <code>:focus-visible），再按一次才落到 <textarea></textarea> 上，体验卡顿且不可预测。
更糟的是：如果某行没 <textarea></textarea>，只有按钮，那这一行的 tabindex="0" 就成了“空焦点”，键盘用户停在这儿却无事可做。
- 真要实现“行级进入 → 单元格内切”，应该用
role="row"+role="gridcell"+ ARIA 属性，而不是靠tabindex堆砌 - 若只是想让 Tab 键在多个
<textarea></textarea>间线性跳转，删掉所有<tr> 和 <code><td> 上的 <code>tabindex，只保留<textarea></textarea>原生行为即可 - 需要跳过某个
<textarea></textarea>？设tabindex="-1"，它不会被 Tab 到，但element.focus()仍有效（比如校验失败后自动聚焦） - 禁用
tabindex="1"、tabindex="2"等正数写法，表格场景下毫无必要 - 多个
<textarea></textarea>都不设 tabindex，或统一设tabindex="0"，效果一致，且兼容性拉满 - 如果非要用正数（比如整个页面只有这几个表单控件需优先聚焦），确保没有其他
tabindex="0"元素存在，否则顺序失控 - 插入后立即调用
newTextarea.focus()，并配newTextarea.scrollIntoView({ block: 'nearest' })，确保可见 - 不要依赖
tabindex值去“算”它该排第几，DOM 位置才是唯一依据 - 如果插入后需保持焦点在原位置（比如编辑中途新增行），记得先
document.activeElement.blur()，再插入，避免焦点意外跳转
tabindex="1" 在表格里几乎总是错的
设 <textarea tabindex="1"></textarea> 不会让它变成“第一个被 Tab 到的字段”。它只会被塞进所有正数 tabindex 的队列头，但一旦页面里有 <a href="#"></a> 或 <button></button> 没设 tabindex（即默认 tabindex="0"），Tab 流就变成：所有 tabindex="1" → 所有 tabindex="0" → 其他。结果可能是页脚的“导出”按钮比表格第一行还先被聚焦。
而且移动端 Safari 对正数 tabindex 支持极差，经常静默忽略，用户按 Tab 根本停不到那里。
动态插入 <textarea></textarea> 后 Tab 顺序不更新？焦点没手动接管
JS 动态添加一行带 <textarea></textarea> 的 <tr> 后，新 <code><textarea></textarea> 不会自动加入 Tab 流——不是 tabindex 没生效，而是浏览器只在初始渲染时扫描一次可聚焦元素。后续插入的，得靠 JS 主动干预。
别指望它“自动接上”前一个的顺序。DOM 插入位置决定了它的自然顺序，但若插在中间，可能打乱原有节奏；若插在末尾，又可能被其他已存在的 tabindex="0" 元素截断。
表格的 Tab 导航看似简单，真正难的是 DOM 顺序、视觉顺序、语义顺序三者对齐。最容易被忽略的，是 Safari 和移动端对 tabindex 的宽容度极低——写上去不报错，但按 Tab 就是没反应，连 outline 都不出现。这时候别怀疑代码，先检查是否用了正数 tabindex，或者 <tr> 聚焦后没补 <code>:focus-visible 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
