我有一个有两个按钮的页面。一个是<button>元素，另一个是<input type="submit">元素。按钮按此顺序出现在页面上。如果我在表单中的任何一个文本字段中，并按下<Enter>，则会触发按钮元素的单击事件。我认为这是因为button元素放在前面。
我找不到任何看起来可靠的方法来设置默认按钮，我也不想在这一点上。在没有更好的东西的情况下，我已经捕获了窗体上的任何地方的一个按键，如果它是<Enter>键被按下，我只是否定它:
$('form').keypress( function( e ) {
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
return false;
}
})
据我所知，到目前为止，它似乎是有效的，但感觉难以置信的笨拙。
有人知道更复杂的方法吗?
同样，这个解决方案是否存在我没有意识到的陷阱?
谢谢。
当前回答
当你使用<button>元素时，默认情况下它会认为button type="submit"，所以如果你定义了button type="button"，那么它就不会认为<button>是提交按钮。
其他回答
阅读HTML规范以真正理解预期的行为是很重要的:
HTML5规范明确规定了隐式提交中会发生什么:
表单元素的默认按钮是按树顺序排列的第一个提交按钮，其表单所有者就是该表单元素。 如果用户代理支持让用户隐式提交表单(例如，在某些平台上，当文本字段被聚焦时，点击“enter”键隐式提交表单)，那么对于默认按钮具有定义的激活行为的表单，这样做必须导致用户代理在默认按钮上运行合成的单击激活步骤。
这在HTML4规范中没有明确规定，但是浏览器已经实现了HTML5规范中描述的内容(这就是为什么显式包含它)。
编辑添加:
我能想到的最简单的答案是把你的提交按钮放在表单的第一个[type="submit"]项，用css在表单底部添加填充，并把提交按钮绝对放置在你想要它的底部。
我会像下面这样做:在处理按钮的onclick事件(不提交)检查事件对象的键码。如果是回车，我会返回false。
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()，其他按钮将被触发。
通过在聚焦<input type="text">上按“Enter”，你在第一个定位的元素上触发“click”事件:<button>或<input type="submit">。如果你在<textarea>中按“Enter”，你只是创建了一个新的文本行。
请看这里的例子。
你的代码阻止在<textarea>中创建一个新的文本行，所以你必须捕捉键按下<input type="text">。
但是为什么需要在文本框中按Enter呢?如果你想通过按“Enter”来提交表单，但<按钮>必须保持在布局中的第一个位置，只需使用标记:将<input type="submit">代码放在<按钮>之前，并使用CSS保存你需要的布局。
捕获'Enter'并保存标记:
$('input[type="text"]').keypress(function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
// also submit by pressing Enter:
$("form").submit();
}
});
您可以使用javascript阻止表单提交，直到适当的时间。举个简单的例子:
<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>
按enter键仍然会触发表单提交，但javascript会阻止它实际提交，直到您实际按下按钮。
