通过监听 enter 键事件并手动聚焦下一个可交互表单元素，可让 android/ios 软键盘的「next」按钮（或回车键）顺畅切换至下个 input 或 select 字段，提升移动端表单填写体验。
通过监听 enter 键事件并手动聚焦下一个可交互表单元素，可让 android/ios 软键盘的「next」按钮（或回车键）顺畅切换至下个 input 或 select 字段，提升移动端表单填写体验。
在移动端 Web 表单中，用户常期望软键盘上的「Next」（或「→」）按钮能自动将焦点移至下一个输入框——但默认情况下，仅当 <input> 元素明确声明 type="text" 且位于同一 <form> 内时，部分浏览器才可能启用该行为；而多数情况下（尤其配合正则校验、大小写转换等逻辑后），原生 Next 功能会失效。
要可靠实现此功能，推荐使用统一的键盘事件监听方案：捕获 keydown 事件，识别 Enter 键（keyCode 13），定位当前元素在表单内的顺序，并主动调用 .focus() 切换焦点。以下为生产就绪的实现代码：
document.body.addEventListener('keydown', function(e) {
// 仅响应 Enter 键（兼容旧版 keyCode 和现代 key）
if (e.key !== 'Enter' && e.which !== 13) return;
const target = e.target;
const form = target.closest('form');
if (!form) return;
// 获取表单内所有可见、可聚焦的控件（input/select/textarea）
const focusableElements = Array.from(
form.querySelectorAll('input:not([type="hidden"]), select, textarea')
).filter(el =>
window.getComputedStyle(el).display !== 'none' &&
el.tabIndex !== -1 &&
!el.hasAttribute('disabled') &&
!el.hasAttribute('readonly')
);
const currentIndex = focusableElements.indexOf(target);
const nextElement = focusableElements[currentIndex + 1];
if (nextElement) {
nextElement.focus();
// 可选：滚动到可视区域（尤其长表单）
nextElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
// 阻止默认提交行为（避免意外触发表单提交）
e.preventDefault();
});✅ 关键优化点说明：
- 使用 e.key === 'Enter' 优先判断（更语义化、兼容性更好），保留 e.which !== 13 作为降级；
- 严格筛选 focusableElements：排除 type="hidden"、disabled、readonly 及隐藏元素；
- 支持 <select> 和 <textarea>，适配更复杂表单结构；
- 添加 scrollIntoView 提升用户体验，防止焦点被遮挡；
- e.preventDefault() 避免 Enter 键意外提交表单。
⚠️ 注意事项：
- 确保所有目标 <input> 均包裹在同一 <form> 标签下，否则 closest('form') 将失败；
- 若使用框架（如 React/Vue），请将事件监听器挂载在合适生命周期内，并注意事件卸载以避免内存泄漏；
- 对于纯静态页面，可直接置于 <script> 标签末尾或 DOMContentLoaded 回调中执行；
- 不建议依赖 onkeyup 中的正则过滤（如 replace(/[^A-z]/g,'')）来控制输入——应改用 input 事件 + setSelectionRange 保持光标位置，或使用 pattern + title 提供友好提示。
该方案跨平台兼容 Android（Chrome/Samsung）、iOS（Safari/Chrome），无需修改 HTML 结构，也无需引入第三方库，是轻量、稳定、可维护的移动端表单导航解决方案。
