Question

输入触发按钮点击

2011-01-21

132904

javascript jquery html forms enter

我有一个页面，其中有两个按钮。一个是 <button> 元素，另一个是 <input type="submit"> 。按钮按该顺序显示在页面上。如果我在表单中的任意位置的文本字段中并按 <Enter> ，则会触发按钮元素的 click 事件。我认为这是因为按钮元素位于第一位。

我找不到任何看似可靠的方法来设置默认按钮，目前我也不一定想这样做。在没有更好的办法的情况下，我捕获了表单上任意位置的按键，如果按下的是 <Enter> 键，我只会将其取反：

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

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

据我目前所知，它似乎在起作用，但感觉非常笨拙。

有人知道更复杂的技术吗？

同样，这个解决方案是否存在我不知道的陷阱？

谢谢。

Answer 1

使用

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

应该可以解决问题。

原因是表单内的按钮的类型隐式设置为 submit 。正如 zzzzBoz 所说，规范规定在这种情况下会触发第一个带有 type="submit" 的 button 或 input 。如果您专门设置了 type="button" ，则浏览器将不再考虑它。

Answer 2

阅读 HTML 规范对于真正理解预期行为非常重要：

HTML5 规范明确说明了 隐式提交 中发生的情况：

A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.

这在 HTML4 规范中并未明确说明，但是浏览器已经在实现 HTML5 规范中描述的内容（这就是明确包含它的原因）。

编辑以添加：

我能想到的最简单的答案是将您的提交按钮作为表单中的第一个 [type="submit"] 项，使用 css 在表单底部添加填充，并将提交按钮绝对定位在您想要的底部位置。

Answer 3

无论您在何处使用 <button> 元素，默认情况下它都会将该按钮视为 type="submit" ，因此如果您将按钮定义为 type="button" ，则它不会将 <button> 视为提交按钮。