输入触发按钮单击

Question

我有一个带两个按钮的页面.一个是<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说,规范说,第一button或input用type="submit"是什么在这种情况下触发.如果您专门设置type="button",则浏览器不会考虑它.

Answer 2

阅读HTML规范以真正了解预期的行为非常重要:

在HTML5规范明确规定在发生的事情implicit submissions:

表单元素的默认按钮是树顺序中的第一个提交按钮,其表单所有者是该表单元素.

如果用户代理支持让用户隐式提交表单(例如,在某些平台上按下"enter"键,而文本字段被聚焦则隐式提交表单),然后对默认按钮具有已定义激活的表单执行此操作行为必须使用户代理在该默认按钮上运行合成单击激活步骤.

这在HTML4规范中没有明确说明,但是浏览器已经实现了HTML5规范中描述的内容(这就是明确包含它的原因).

编辑添加:

我能想到的最简单的答案是将提交按钮作为[type="submit"]表单中的第一项,使用css在表单底部添加填充,并将提交按钮绝对放在您喜欢的底部.

Answer 3

我认为你不需要javascript或CSS来解决这个问题.

根据按钮的html 5规范,没有类型属性的按钮被视为与其类型设置为"提交"的按钮相同,即作为用于提交其包含形式的按钮.将按钮的类型设置为"按钮"应该可以防止您看到的行为.

我不确定浏览器对此的支持,但是在html 4.01规范中为按钮指定了相同的行为,所以我希望它非常好.

Answer 4

通过在焦点上按"Enter",<input type="text">您可以在第一个定位元素上触发"click"事件:<button>或<input type="submit">.如果按"Enter" <textarea>,则只需创建一个新文本行.

请参阅此处的示例.

您的代码阻止创建新的文本行<textarea>,因此您必须仅按下按键<input type="text">.

但为什么你需要Enter在文本字段中按？如果你想通过按'Enter'来提交表单,但<button>必须保持在布局中的第一个,只需使用标记:将<input type="submit">代码放在之前<button>并使用CSS来保存你需要的布局.

捕获'Enter'并保存标记:

$('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`*/
});

Answer 5

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

Answer 6

默认情况下，在表单的文本字段中按 Enter 键将提交表单。如果您不希望它以这种方式工作，您必须捕获回车键并像您所做的那样使用它。这是没有办法解决的。即使表单中没有按钮，它也会以这种方式工作。