回车键默认不触发表格内焦点跳转，需用JavaScript拦截Enter键并手动focus下一个input；推荐设置tabindex属性配合查找，再添加enterkeyhint="next"提升移动端体验。
回车键默认不触发表格内焦点跳转
HTML 表格本身没有“按回车自动跳到下一个 <input>”的行为。浏览器默认只在表单提交场景下响应回车（比如最后一个可提交控件获得焦点时），表格里的纯 <input> 是独立的，回车只会换行（textarea）或无反应（input[type="text"]）。要实现跳转，必须用 JavaScript 拦截并手动控制焦点。
给每个文本域绑定 keydown 事件监听
核心是捕获 Enter 键（event.key === 'Enter'），阻止默认行为，然后找到下一个同级或表格中逻辑顺序的 <input> 并调用 .focus()。
常见做法是：给所有目标文本域加统一 class（如 class="tab-input"），再用 querySelectorAll 获取它们的 NodeList，遍历索引定位下一个。
document.querySelectorAll('.tab-input').forEach((el, i, arr) => {
el.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
const next = arr[i + 1];
if (next) next.focus();
}
});
});
- 注意：如果当前是最后一个，
arr[i + 1]为undefined，需判空，否则调用.focus()会报错 - 这个逻辑只适用于线性顺序（从上到下、从左到右），不处理跨行或合并单元格的复杂表格布局
- 如果表格有动态增删行，需在插入后重新绑定，或改用事件委托（监听
<table>，再判断 <code>event.target是否匹配）用
tabindex配合focus()更可靠单纯靠 DOM 顺序容易出错，尤其当表格里混有按钮、只读字段或隐藏元素时。更稳妥的方式是显式设置
tabindex属性，让逻辑顺序和焦点顺序一致：立即学习“前端免费学习笔记（深入）”；
<tr> <td><input class="tab-input" tabindex="1"></td> <td><input class="tab-input" tabindex="2"></td> </tr> <tr> <td><input class="tab-input" tabindex="3"></td> </tr>
然后监听时按
tabindex查找下一个：el.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); const currentIdx = parseInt(el.getAttribute('tabindex')) || 0; const next = document.querySelector(`.tab-input[tabindex="${currentIdx + 1}"]`); if (next) next.focus(); } });-
tabindex必须是整数，且不能重复；跳过0或负值，它们不参与自定义顺序 - 这种方式对 DOM 结构变化不敏感，新增行只要正确设
tabindex就能被识别 - 但要注意：用户仍可用 Tab 键切换，若想禁用 Tab 切换，得额外监听
keydown拦截Tab，一般不建议
移动端软键盘回车键可能显示为“搜索”或“发送”
Android/iOS 软键盘上的回车图标不总是“换行”或“下一步”，取决于
input的type和enterkeyhint属性。即使 JS 拦截了Enter，软键盘也可能不触发keydown。- 确保使用
type="text"或type="search"，避免type="url"或type="email"导致软键盘行为差异 - 添加
enterkeyhint="next"可提示系统显示“下一步”图标（兼容性：Chrome 77+、Safari 16.4+） - 部分安卓 WebView 仍可能不触发
keydown，此时需 fallback 到input事件 + 值变化检测（不推荐，易误触）
tabindex+ 显式查找 +enterkeyhint提示，其他都是妥协方案。 -
