提交按钮点下去就置灰,用户等不及又在输入框里按了回车,后台收到两条一样的记录,时间戳只差 300 毫秒。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,单输入框的表单在按回车时会走浏览器的隐式提交,这条路不经过按钮的 disabled 状态。置灰只挡住了鼠标,表单的 submit 事件仍然照常触发。
「回车隐式提交」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。报错里带路径的,先去看那个路径在不在、权限对不对。
let submitting = false;
form.addEventListener('submit', async e => {
e.preventDefault();
if (submitting) return;
submitting = true;
try { await save(); } finally { submitting = false; }
});
同一份配置存在多处的,先确认改的是被加载的那一份。新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。
具体做法是,在 form 的 submit 里加提交中标志,进入后立即 return,不依赖按钮状态;按钮 click 也走同一个提交函数,让两条路径共用一把锁;后端按业务单号加唯一索引兜底。
最后用这个标准收尾,按住回车连敲三次,网络面板只有一个保存请求,列表里只有一条记录。
