onkeydown监听回车不总生效是因为Layui表单元素真实input被包裹在div中且未绑定原生事件，焦点常被内部逻辑接管；必须直接监听真实input，推荐用事件委托绑定到form上并判断target是否为input且key为Enter。
为什么 onkeydown 监听回车不总生效？
因为 layui 表单元素（如 layui-input）是包裹在 <div class="layui-input"> 里的真实 <input>，但默认未绑定原生事件监听；且部分场景下焦点被 layui 的内部逻辑接管，直接给父容器绑 onkeydown 会失效。
- 必须监听真实
<input>元素，而非外层div - 不能依赖
layui.form.render()后自动补事件，得手动加 - Layui 的
form.on('submit(...)')不响应回车跳转，只响应提交行为
如何用原生 addEventListener 实现跳转逻辑？
最稳的方式是遍历所有表单 <input>，对每个绑定 keydown 事件，检测 event.key === 'Enter' 后调用 focus() 到下一个可聚焦元素。
document.querySelectorAll('form input').forEach((el, i, arr) => {
el.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault(); // 防止触发表单提交
const next = arr[i + 1];
if (next && !next.disabled && !next.readOnly) {
next.focus();
}
}
});
});
-
e.preventDefault()必须加，否则回车会触发form.submit或按钮点击 - 跳转只限同级
input，不跨textarea或select—— 若需支持，得改用querySelectorAll('form :input') - 注意
:input伪类包含input、textarea、select、button，但button不该被 focus，需过滤
遇到 Layui 动态渲染表单怎么办？
Layui 的 form.render() 或通过 AJAX 加载的表单，DOM 是异步插入的，静态遍历会漏掉新元素。
- 在
form.render()回调里重新绑定，或在 AJAX 成功后立即执行绑定逻辑 - 更通用的做法：用事件委托，监听
form上的keydown，再判断event.target是否为input且满足条件 - 示例委托写法：
document.querySelector('form').addEventListener('keydown', e => { if (e.target.matches('input') && e.key === 'Enter') { ... } });
为什么跳到下一个 input 后光标位置异常？
某些情况下（比如带 Layui 的日期选择器 laydate、数字输入框 layedit），focus() 虽成功，但光标没落到末尾，甚至卡在开头。
- 纯文本
input[type="text"]一般没问题；input[type="number"]在 Chrome 下可能光标重置，可用el.select()强制全选后再focus() - 如果目标
input是 Layui 的layui-input-block内嵌结构，确保它已渲染完成（加个setTimeout(() => next.focus(), 0)微任务延迟） - 禁用
autocomplete="off"可能干扰焦点行为，建议移除或设为autocomplete="new-password"
实际项目里，回车跳转看似简单，但和 Layui 的 DOM 结构、渲染时机、表单类型强耦合；别指望一次写完就一劳永逸，得结合具体表单结构做微调。
