当您在一个表单中有多个提交按钮，并且用户按Enter键从文本字段提交表单时，这段代码将通过从按键事件调用表单上的提交事件来覆盖默认功能。代码如下:

$('form input').keypress(function(e){

    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)){
        $(e.target).closest('form').submit(); return false;
    }
    else
        return true;
});

HTML 4并没有将其显式化。HTML 5规定第一个提交按钮必须是默认的:

4.10.21.2隐式提交 表单元素的默认按钮是按树顺序排列的第一个提交按钮，其表单所有者就是该表单元素。 如果用户代理支持让用户隐式提交表单 (例如，在某些平台上，在输入文本时按下“enter”键 控件隐式地提交表单)，然后为 表单，其默认按钮具有激活行为，但没有 禁用时，必须导致用户代理在此触发单击事件 默认按钮。

如果你想在保持视觉顺序的同时影响哪个是“第一个”，那么你可以采取一些方法。

一个屏幕外、无法对焦的按钮。

.hidden-default { 位置:绝对的; 左:-9999 px; ｝ < >形式 <输入名称= " text " > <button name="submit" value="wanted" class="hidden-default" tabindex="-1"></button> <button name="submit" value="not wanted">不是默认值 <button name="submit" value="wanted">看起来像默认的</button> > < /形式

Flexbox顺序:

.ordering { 显示:inline-flex; ｝ . ordered按钮{ 秩序:2; ｝ .订购按钮+按钮{ 顺序:1; ｝ < >形式 <输入名称= " text " > < div class = "排序" > <button name="submit" value="wanted">文件顺序第一个</button> <button name="submit" value="not wanted">在文档顺序中的第2位</button> . </button> . <button name="submit" value="not wanted < / div > > < /形式

我有一个带有11个提交按钮的表单，当用户按下Enter键时，它总是使用第一个提交按钮。我在别处读到过，在一个表单上有多个提交按钮不是一个好主意(糟糕的做法)，最好的方法是将您想要的按钮作为默认按钮，作为表单上唯一的提交按钮。其他按钮应该变成“TYPE=BUTTON”，并添加一个onClick事件，用JavaScript调用自己的提交例程。就像这样:

<SCRIPT Language="JavaScript">
function validform()
{
  // Do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

这里，button3是默认的，尽管您是通过编程方式提交表单和其他按钮，但mjsubmit例程将验证它们。

现在可以使用Flexbox解决这个问题:

HTML

<form>
    <h1>My Form</h1>
    <label for="text">Input:</label>
    <input type="text" name="text" id="text"/>

    <!-- Put the elements in reverse order -->
    <div class="form-actions">
        <button>Ok</button> <!-- Our default action is first -->
        <button>Cancel</button>
    </div>
</form>

CSS

.form-actions {
    display: flex;
    flex-direction: row-reverse; /* Reverse the elements inside */
}

解释

使用Flexbox，我们可以通过使用CSS规则:flex-direction: row-reverse来反转使用display: flex的容器中的元素顺序。这不需要CSS或隐藏元素。对于不支持Flexbox的旧浏览器，他们仍然得到一个可行的解决方案，但元素不会被反转。

Demo

http://codepen.io/Godwin/pen/rLVKjm

我的食谱:

<form>
    <input type=hidden name=action value=login> <!-- The magic! -->

    <input type=text name=email>
    <input type=text name=password>

    <input type=submit name=action value=login>
    <input type=submit name=action value="forgot password">
</form>

如果没有一个按钮被“单击”，它将发送默认隐藏字段。

如果单击其中一个，它具有优先级，其值将被传递。

从HTML 4规范:

如果一个表单包含多个提交按钮，只有激活 提交按钮成功。

这意味着如果有多个提交按钮且没有激活(单击)，则没有一个提交按钮会成功。

我认为这是有道理的:

想象一个有多个提交按钮的巨大表单。在顶部，有一个“删除这条记录”按钮，然后有很多输入，在底部有一个“更新这条记录”按钮。当用户在表单底部的字段中按Enter时，他/她永远不会怀疑他/她从顶部隐式地按下了“删除此记录”。

因此，我认为使用用户没有定义(点击)的第一个按钮或任何其他按钮都不是一个好主意。不过，浏览器当然也在这么做。