如何让输入框按回车仅更新值，而非自动提交表单？

默认情况下，表单内的输入框按下回车键会触发浏览器的表单提交行为。要实现回车仅更新输入框值、仅点击提交按钮才提交表单的效果，可通过以下两种方式实现：

方法一：给输入框绑定回车事件，阻止默认提交 #

直接监听输入框的回车键按下事件，阻止表单提交的默认行为，同时可按需补充输入值的校验/更新逻辑：

<form>
  <input id="stake" type="number" name="stake[]" value="5">
  <input class="bet1" type="submit" name="submit" value="Bet">
</form>

<script>
document.getElementById('stake').addEventListener('keydown', function(e) {
  // 检测回车键
  if (e.key === 'Enter' || e.keyCode === 13) {
    // 阻止表单提交的默认行为
    e.preventDefault();
    // 可选：强制输入值为合法数字，非法则重置为默认值5
    this.value = Number(this.value) || 5;
  }
});
</script>

方法二：给表单绑定提交事件，仅允许按钮触发提交 #

通过标记区分提交行为是来自按钮点击还是回车，仅当按钮触发时才允许表单提交：

<form id="betForm">
  <input id="stake" type="number" name="stake[]" value="5">
  <input class="bet1" type="submit" name="submit" value="Bet">
</form>

<script>
let isButtonTriggered = false;

// 点击提交按钮时标记为合法提交
document.querySelector('.bet1').addEventListener('click', function() {
  isButtonTriggered = true;
});

// 监听表单提交事件
document.getElementById('betForm').addEventListener('submit', function(e) {
  if (!isButtonTriggered) {
    e.preventDefault();
    // 回车触发时，更新输入框值（可选）
    const stakeInput = document.getElementById('stake');
    stakeInput.value = Number(stakeInput.value) || 5;
  }
  // 重置标记，避免后续回车误提交
  isButtonTriggered = false;
});
</script>

补充说明 #

• type="number"的输入框会自动限制输入内容为数字，但无法阻止回车触发表单提交，因此必须通过代码拦截默认行为。
• 输入框的值在用户输入时已实时更新，上述代码中的“更新值”逻辑主要用于非法输入的修正（比如输入非数字内容时重置为默认值），若无需校验可省略该部分。

内容的提问来源于stack exchange，提问作者Nambuli89