我有一个带有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例程将验证它们。

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例程将验证它们。

我使用的另一种解决方案是在表单中只设置一个按钮，并伪造其他按钮。

这里有一个例子:

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

然后我将span元素的样式设置为看起来像一个按钮。JavaScript侦听器观察跨度，并在单击后执行所需的操作。

这并不一定适用于所有情况，但至少很容易做到。

<form onsubmit="alert('submit');return false;">
    <input name="username">
    <input name="password" type="password">
    <button onclick="if(document.activeElement === this){alert('button 1');}else{default_submit.click();}return false;">button 1</button>
    <button onclick="if(document.activeElement === this){alert('button 2');}else{default_submit.click();}return false;">button 2</button>
    <input id="default_submit" type="submit">
</form>

如果从文本输入中按Enter，则该按钮将不会聚焦。然后我们忽略这个点击，然后点击默认提交，但是如果你用鼠标点击按钮，它将被聚焦，然后我们应用这个点击。

演示:https://codepen.io/remon-reffat/pen/mdRaXbp

奇怪的是，第一个按钮进入总是第一个按钮，无论是否可见，例如使用jQuery的show/hide()。添加属性。attr('disabled'， 'disabled')可以完全阻止接收输入提交按钮。这是一个问题，例如在调整记录对话框中的插入/编辑+删除按钮可见性时。我发现它不那么hackish和简单的将编辑放在插入前面:

<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="insert">Insert</button>
<button type="submit" name="action" value="delete">Delete</button>

并使用JavaScript代码:

$("#formId button[type='submit'][name='action'][value!='insert']").hide().attr('disabled', 'disabled');
$("#formId button[type='submit'][name='action'][value='insert']").show().removeAttr('disabled');