表单含禁用按钮时，输入框按回车submit事件未触发，求解答

这其实是Chrome浏览器处理表单回车提交的一个特定行为，而且确实是不少开发者遇到过的已知问题。

咱们先拆解下你的表单结构：

<form> 
  <input type="text" placeholder="press enter here"/> 
  <button disabled>disabled</button> 
  <button type="submit">submit</button> 
</form>

这里有个容易被忽略的关键细节：未指定type属性的<button>标签，默认类型是submit。也就是说你第一个禁用的按钮本质上是一个disabled状态的提交按钮，而第二个是正常启用的提交按钮。

Chrome在处理输入框回车提交时，会优先查找表单内第一个类型为submit的按钮，如果这个按钮是禁用状态，它就不会继续往后寻找其他可用的提交按钮，直接跳过了触发submit事件的逻辑——这就是为什么点击第二个按钮能正常提交，但回车不行的核心原因。

这里给你几个可行的方案：

• 给禁用按钮指定type="button"：把第一个按钮的类型明确设为普通按钮，这样浏览器就会忽略它，转而找到后面的submit按钮作为默认触发项：

  <button type="button" disabled>disabled</button>
  

• 调整按钮顺序：把可用的submit按钮放在禁用按钮前面，让浏览器优先找到它：

  <form> 
    <input type="text" placeholder="press enter here"/> 
    <button type="submit">submit</button>
    <button disabled>disabled</button> 
  </form>
  

• 手动监听回车事件：给输入框添加keydown事件监听，判断按下的是回车键时，手动触发表单的submit：

  document.querySelector('input[type="text"]').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      this.form.submit();
    }
  });
  

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