我有一个有两个按钮的页面。一个是<button>元素，另一个是<input type="submit">元素。按钮按此顺序出现在页面上。如果我在表单中的任何一个文本字段中，并按下<Enter>，则会触发按钮元素的单击事件。我认为这是因为button元素放在前面。
我找不到任何看起来可靠的方法来设置默认按钮，我也不想在这一点上。在没有更好的东西的情况下，我已经捕获了窗体上的任何地方的一个按键，如果它是<Enter>键被按下，我只是否定它:
$('form').keypress( function( e ) {
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
return 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()，其他按钮将被触发。
其他回答
默认情况下，在表单的文本字段中按enter键将提交表单。如果您不希望它以这种方式工作，您必须捕获回车键并像您所做的那样使用它。这是没有办法的。即使表单中没有按钮，它也会以这种方式工作。
我添加了一个类型为“提交”的按钮作为表单的第一个元素，并使其不可见(宽度:0;高度:0;padding:0;margin:0;border-style:none;font-size:0;)。工作类似于站点的刷新，即当按钮被按下时，我不做任何事情，除了站点再次加载。对我来说很好……
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。
我的情况在表单元素中有两个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按钮设置为一个不存在的表单，并将我想要在Enter键上触发的Update按钮设置为用户在输入文本时将处于的表单。
这是迄今为止唯一对我有效的方法。
