为何多输入框表单按Enter键无法触发jQuery submit事件？

这问题我之前踩过坑，其实是浏览器的默认行为在搞鬼！咱们先搞清楚根源：

浏览器对于表单回车提交有个隐性规则：

• 当表单里没有显式的提交控件（比如<input type="submit">或<button type="submit">）时，如果只有1个文本输入框，回车会自动触发表单提交；
• 但如果表单里有多个文本输入框，浏览器就不会主动触发提交动作了——这就导致你绑定的$('#gg').submit()事件根本没机会执行。

下面给你几个靠谱的解决方案：

方案1：添加隐藏的提交按钮（最推荐） #

这是最贴合浏览器默认逻辑的方法，只需要加一个隐藏的提交按钮，不影响页面布局，但能让浏览器识别到“可以触发提交”：

<form id="gg" method="post">
 <input name="languageId" type="text">
 <input name="languageName" type="text">
 <!-- 隐藏提交按钮，不占页面空间 -->
 <input type="submit" style="display: none;">
</form>

这样不管有多少个输入框，按回车都会正常触发表单提交，你的submit事件也能顺利触发。

方案2：手动监听回车键触发提交 #

如果你不想加提交按钮，可以给所有输入框绑定keydown事件，监听回车键（keyCode为13），然后手动触发表单提交：

// 给表单内的所有输入框绑定回车事件
$('#gg input').keydown(function(e) {
  if (e.keyCode === 13) {
    e.preventDefault(); // 避免浏览器可能的默认行为冲突
    $('#gg').submit(); // 手动触发submit事件
  }
});

不过这种方法要注意：如果后续给表单加了提交按钮，可能会出现重复提交的问题，所以不如方案1稳妥。

方案3：用隐藏的button标签替代 #

和方案1原理一样，也可以用<button>标签来做隐藏的提交控件，效果完全相同：

<form id="gg" method="post">
 <input name="languageId" type="text">
 <input name="languageName" type="text">
 <button type="submit" style="display: none;"></button>
</form>

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