表单单个输入框可触发submit，多个则不行的原因及解决方法

原因 #

这是浏览器默认行为规范导致的：

• 当表单内仅包含一个可提交的文本类输入框（type为text、search、url、email、password等）时，浏览器会自动绑定回车触发表单提交的逻辑——默认认为用户输入完这个唯一输入框后回车就是要提交表单。
• 当表单内有两个及以上这类输入框时，浏览器会取消自动绑定回车提交的逻辑，因为无法判断用户是否完成所有输入项的填写，需要用户明确触发提交操作。

解决方法 #

有几种简单可行的方案：

• 添加隐藏的submit按钮：给表单加一个type为submit的按钮，哪怕设置为隐藏状态，浏览器就能识别到表单的提交入口，回车时会自动触发submit事件。示例代码：

  <form>
    <input type="text" name="input1">
    <input type="text" name="input2">
    <button type="submit" style="display: none;"></button>
  </form>
  

• 手动监听回车事件触发提交：给每个文本输入框绑定keydown事件，判断用户按下的是回车键时，手动调用表单的submit方法。示例代码：

  const inputs = document.querySelectorAll('input[type="text"]');
  inputs.forEach(input => {
    input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault(); // 防止可能的默认行为冲突
        input.form.submit();
      }
    });
  });
  

• 显式添加可见的submit按钮：直接在表单里放一个正常显示的提交按钮，用户既可以点击按钮提交，也能通过回车触发提交（此时浏览器会识别到提交按钮，恢复回车提交逻辑）。

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