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 spec explicitly states what happens in implicit submissions：

表单元素的默认按钮是树形顺序中的第一个提交按钮，其表单所有者是表单元素。

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

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

编辑添加：

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

Answer 3

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

根据html 5 spec for buttons，没有类型属性的按钮被视为与其类型设置为“提交”的按钮相同，即作为用于提交其包含形式的按钮。将按钮的类型设置为“按钮”可以防止您看到的行为。

我不确定浏览器对此的支持，但html 4.01 spec for buttons中指定了相同的行为，所以我希望它非常好。

Answer 4

在焦点<input type="text">上按“Enter”，您会在第一个定位元素上触发“点击”事件：<button>或<input type="submit">。如果您在<textarea>中按“Enter”，则只需创建一个新文本行。

请参阅示例here。

您的代码无法在<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

您可以使用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>

按回车仍然会触发表单提交，但是javascript会阻止它实际提交，直到你真正按下按钮。

Answer 7

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

Answer 8

我会像下面这样做：在按钮的onclick事件的处理程序中（不提交）检查事件对象的键码。如果是“输入”，我将返回false。

Answer 9

我的情况在表单元素中有两个Submit按钮：Update和Delete。 Delete按钮删除图像，Update按钮使用表单中的文本字段更新数据库。

由于Delete按钮是表单中的第一个按钮，因此它是Enter键上的默认按钮。不是我想要的。用户希望在更改某些文本字段后能够点击Enter。

我找到了设置默认按钮here的答案：

<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按钮设置为不存在的表单，并将我想要在Update键上触发的Enter按钮设置为用户在输入文本时所在的表单

到目前为止，这是唯一对我有用的东西。

Answer 10

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（），则会触发其他按钮。

Answer 11

您可以执行以下操作。

将事件绑定到通用函数中，然后通过按键或单击按钮调用事件。

例如。

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

Answer 12

我添加了一个“提交”类型的按钮作为表单的第一个元素，并使其不可见（width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;）。像刷新网站一样工作，即按下按钮时我什么都不做，除了再次加载网站。对我来说工作得很好......

输入触发按钮单击

12 个答案: