我有一个带有两个按钮的页面。一个是<button>元素，另一个是<input type="submit">. 按钮按该顺序显示在页面上。如果我在表单中的任何地方的文本字段中并按下<Enter>，按钮元素的click事件就会被触发。我认为这是因为按钮元素位于第一位。
我找不到任何看起来像设置默认按钮的可靠方法的东西，我现在也不一定想要。在没有更好的情况下，我已经在表单的任何位置捕获了一个按键，如果它是<Enter>按下的键，我只是否定它：
$('form').keypress( function( e ) {
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
return false;
}
})
到目前为止，据我所知，它似乎在起作用，但感觉非常笨拙。
有谁知道这样做的更复杂的技术？
同样，这个解决方案有什么我不知道的陷阱吗？
谢谢。
使用
<button type="button">Whatever</button>
应该做的伎俩。
原因是表单内的按钮的类型隐式设置为submit. 正如 zzzzBoz 所说，规范说 firstbutton或inputwithtype="submit"是在这种情况下触发的内容。如果您特别设置type="button"，则浏览器会将其从考虑中删除。
阅读 HTML 规范以真正理解预期的行为非常重要：
HTML5 规范明确说明了发生了implicit submissions什么：
表单元素的默认按钮是树形顺序中的第一个提交按钮，其表单所有者是该表单元素。
如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本字段聚焦时，按下“enter”键会隐式提交表单），那么对于默认按钮已定义激活的表单执行此操作行为必须导致用户代理在该默认按钮上运行合成点击激活步骤。
这在 HTML4 规范中没有明确说明，但是浏览器已经实现了 HTML5 规范中描述的内容（这就是明确包含它的原因）。
编辑添加：
我能想到的最简单的答案是将您的提交按钮作为表单中的第一[type="submit"]项，使用 css 在表单底部添加填充，并将提交按钮绝对定位在您想要的底部。
<button>默认情况下，无论您在哪里使用元素，它都会考虑该按钮type="submit"，因此如果您定义按钮，type="button"那么它不会将其<button>视为提交按钮。
我认为您不需要 javascript 或 CSS 来解决此问题。
根据按钮的html 5 规范，没有类型属性的按钮被视为与类型设置为“提交”的按钮相同，即作为提交其包含表单的按钮。将按钮的类型设置为“按钮”应该可以防止您看到的行为。
我不确定浏览器对此的支持，但在html 4.01 规范中为按钮指定了相同的行为，所以我希望它非常好。
通过在焦点上按“Enter”，<input type="text">您可以在第一个定位元素上触发“点击”事件：<button>或<input type="submit">。如果在 中按“Enter” <textarea>，则只需创建一个新文本行。
请参阅此处的示例。
您的代码阻止在 中创建新的文本行<textarea>，因此您必须只为<input type="text">.
但是为什么你需要Enter在文本字段中按下？如果您想通过按“Enter”提交表单，但<button>必须保持布局中的第一个，只需使用标记：将<input type="submit">代码放在前面<button>并使用 CSS 保存您需要的布局。
捕捉“输入”并保存标记：
$('input[type="text"]').keypress(function (e) {
var code = e.keyCode || e.which;
if (code === 13)
e.preventDefault();
$("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});
You can use javascript to block form submission until the appropriate time. A very crude example:
<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">
<input type='text' name='txtTest' />
<input type='button' value='Submit'
onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />
</form>
Pressing enter will still trigger the form to submit, but the javascript will keep it from actually submitting, until you actually press the button.
默认情况下，在表单的文本字段中按 enter 将提交表单。如果您不希望它以这种方式工作，则必须捕获 enter 按键并像您所做的那样使用它。没有办法解决这个问题。即使表单中没有按钮，它也会以这种方式工作。
DOM 示例
<button onclick="anotherFoo()"> Add new row</button>
<input type="text" name="xxx" onclick="foo(event)">
javascript
function foo(event){
if(event.which == 13 || event.keyCode == 13) // for crossbrowser
{
event.preventDefault(); // this code prevents other buttons triggers use this
// do stuff
}
}
function anotherFoo(){
// stuffs.
}
如果您不使用 preventDefault()，其他按钮将被触发。
我会这样做：在按钮的 onclick 事件（不是提交）的处理程序中检查事件对象的键码。如果是“输入”，我会返回 false。
你可以做这样的事情。
将您的事件绑定到一个通用函数中，并通过按键或按钮单击来调用该事件。
例如。
function callME(event){
alert('Hi');
}
$('button').on("click",callME);
$('input ').keypress(function(event){
if (event.which == 13) {
callME(event);
}
});
Submit我的情况在表单元素中有两个按钮：Update和Delete。Delete按钮删除图像，按钮Update使用表单中的文本字段更新数据库。
因为该Delete按钮位于表单的第一个位置，所以它是键上的默认按钮Enter。不是我想要的。Enter用户希望在更改某些文本字段后能够点击。
我在这里找到了设置默认按钮的答案：
<form action="/action_page.php" method="get" id="form1">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
在不使用任何脚本的情况下，我使用属性定义了每个按钮所属的表单<button> form="bla"。我将Delete按钮设置为不存在的表单，并将Update我想在Enter键上触发的按钮设置为用户在输入文本时将处于的表单。
这是迄今为止唯一对我有用的东西。
我添加了一个“提交”类型的按钮作为表单的第一个元素，并使其不可见 ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;)。就像网站的刷新一样，即当按钮被按下时我什么都不做，除了网站再次加载。对我来说工作正常...