本文介绍如何在保留输入框回车编辑功能的同时，防止其触发表单自动提交，仅允许显式点击提交按钮完成提交。

本文介绍如何在保留输入框回车编辑功能的同时，防止其触发表单自动提交，仅允许显式点击提交按钮完成提交。

在 Web 表单中，当 <input type="number"> 等可编辑控件位于 <form></form> 内部时，用户按下 Enter 键会默认触发表单提交（即使未显式定义 <form></form> 标签，浏览器也可能基于上下文隐式处理）。这与预期不符——我们希望用户能通过回车快速确认输入值（如修改投注金额），但仅在点击“Bet”按钮时才真正提交。

解决方法是拦截 Enter 键（keyCode 13 或更推荐的 event.key === 'Enter'）的默认行为，调用 event.preventDefault() 阻止表单提交，同时不干扰输入值的更新。

✅ 推荐实现（现代、语义清晰、兼容性好）：

⚠️ 注意事项：

• 使用 onkeydown 或 onkeypress 均可，但 onkeydown 更可靠（key 属性在 keydown 中始终可用）；
• 避免仅依赖 keyCode（已废弃），优先使用 event.key === 'Enter'；
• 若表单有多个输入框，建议统一委托到表单层级处理，例如：

  document.getElementById('betForm').addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && e.target.tagName === 'INPUT' && e.target.type !== 'submit') {
      e.preventDefault();
    }
  });

• 确保 <input type="submit"> 按钮存在且未被 CSS 隐藏或禁用，否则用户将无法提交。

总结：通过精准拦截 Enter 键事件并阻止默认提交行为，即可实现「回车更新数值、点击提交表单」的清晰交互逻辑，提升用户体验与表单可控性。