输入框获焦按回车触发表单首个按钮，移除submit属性仍复现的问题

核心原因 #

浏览器对表单有一套隐式默认规则：哪怕按钮没设type="submit"，表单内的按钮也可能被浏览器默认判定为提交按钮——尤其是表单里只有一个按钮时，或者浏览器会自动把第一个按钮当作默认提交触发对象。另外，回车触发表单提交的行为，并不局限于输入框聚焦的场景：只要表单内有可聚焦元素（比如其他输入框、下拉框），按下回车时浏览器仍可能触发默认的表单提交逻辑，进而触发第一个按钮的点击事件。

具体解决步骤 #

• 给按钮显式指定类型：给表单内所有按钮明确设置type属性，取消按钮直接设为type="button"，彻底杜绝浏览器把它识别成提交按钮。代码示例：

  <button type="button">取消</button>
  

• 阻止表单默认提交行为：给表单绑定submit事件并阻止默认动作，从根源上切断回车触发的提交逻辑。代码示例：

  document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
  });
  

• 精准拦截回车事件：如果只需要在特定输入框聚焦时处理回车，给目标输入框单独绑定keydown事件，仅在该元素聚焦且按下回车时执行对应逻辑，其他情况拦截回车的默认行为。代码示例：

  const targetInput = document.querySelector('#your-input-id');
  targetInput.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      // 这里写你需要执行的逻辑
      e.stopPropagation();
      e.preventDefault();
    }
  });
  

• 排查全局事件干扰：检查代码里是否有全局的keydown事件监听，不小心触发了按钮的点击事件。如果有，缩小事件绑定的范围，避免全局事件误触。

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