如果提交了表单，但不是通过任何特定的按钮，例如
按Enter键
使用JS中的HTMLFormElement.submit()
浏览器应该如何确定多个提交按钮(如果有的话)中的哪一个作为按下的按钮呢?
这在两个层面上很重要:
调用附加到提交按钮的onclick事件处理程序
数据发送回web服务器
到目前为止，我的实验表明:
当按Enter键时，Firefox、Opera和Safari使用表单中的第一个提交按钮
当按Enter键时，IE要么使用第一个提交按钮，要么根本不使用，这取决于我还没能弄清楚的条件
所有这些浏览器都不使用JS提交
标准是怎么说的?
如果有帮助的话，下面是我的测试代码(PHP只与我的测试方法相关，与我的问题本身无关)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>
<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>
<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
<input type="text" name="method" />
<input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
<input type="text" name="stuff" />
<input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
<input type="button" value="submit" onclick="document.theForm.submit();" />
</form>
</body></html>
奇怪的是，第一个按钮进入总是第一个按钮，无论是否可见，例如使用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');
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 >
> < /形式
现在可以使用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
奇怪的是，第一个按钮进入总是第一个按钮，无论是否可见，例如使用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');
