我有一个有两个按钮的页面。一个是<button>元素,另一个是<input type="submit">元素。按钮按此顺序出现在页面上。如果我在表单中的任何一个文本字段中,并按下<Enter>,则会触发按钮元素的单击事件。我认为这是因为button元素放在前面。

我找不到任何看起来可靠的方法来设置默认按钮,我也不想在这一点上。在没有更好的东西的情况下,我已经捕获了窗体上的任何地方的一个按键,如果它是<Enter>键被按下,我只是否定它:

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

据我所知,到目前为止,它似乎是有效的,但感觉难以置信的笨拙。

有人知道更复杂的方法吗?

同样,这个解决方案是否存在我没有意识到的陷阱?

谢谢。


当前回答

阅读HTML规范以真正理解预期的行为是很重要的:

HTML5规范明确规定了隐式提交中会发生什么:

表单元素的默认按钮是按树顺序排列的第一个提交按钮,其表单所有者就是该表单元素。 如果用户代理支持让用户隐式提交表单(例如,在某些平台上,当文本字段被聚焦时,点击“enter”键隐式提交表单),那么对于默认按钮具有定义的激活行为的表单,这样做必须导致用户代理在默认按钮上运行合成的单击激活步骤。

这在HTML4规范中没有明确规定,但是浏览器已经实现了HTML5规范中描述的内容(这就是为什么显式包含它)。

编辑添加:

我能想到的最简单的答案是把你的提交按钮放在表单的第一个[type="submit"]项,用css在表单底部添加填充,并把提交按钮绝对放置在你想要它的底部。

其他回答

阅读HTML规范以真正理解预期的行为是很重要的:

HTML5规范明确规定了隐式提交中会发生什么:

表单元素的默认按钮是按树顺序排列的第一个提交按钮,其表单所有者就是该表单元素。 如果用户代理支持让用户隐式提交表单(例如,在某些平台上,当文本字段被聚焦时,点击“enter”键隐式提交表单),那么对于默认按钮具有定义的激活行为的表单,这样做必须导致用户代理在默认按钮上运行合成的单击激活步骤。

这在HTML4规范中没有明确规定,但是浏览器已经实现了HTML5规范中描述的内容(这就是为什么显式包含它)。

编辑添加:

我能想到的最简单的答案是把你的提交按钮放在表单的第一个[type="submit"]项,用css在表单底部添加填充,并把提交按钮绝对放置在你想要它的底部。

当你使用<button>元素时,默认情况下它会认为button type="submit",所以如果你定义了button type="button",那么它就不会认为<button>是提交按钮。

使用

<button type="button">Whatever</button>

应该能行。

原因是表单中的按钮隐式地设置了提交类型。正如zzzzBoz所说,Spec说在这种情况下触发的是第一个带有type="submit"的按钮或输入。如果你特别设置了type="button",那么它将从浏览器的考虑中删除。

我添加了一个类型为“提交”的按钮作为表单的第一个元素,并使其不可见(宽度:0;高度:0;padding:0;margin:0;border-style:none;font-size:0;)。工作类似于站点的刷新,即当按钮被按下时,我不做任何事情,除了站点再次加载。对我来说很好……

您可以使用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会阻止它实际提交,直到您实际按下按钮。