输入触发按钮单击

Question

我有一个带有两个按钮的页面。一个是 元素，另一个是 。这些按钮按该顺序出现在页面上。如果我位于表单中任意位置的文本字段中并按 ，则会触发按钮元素的 click 事件。我认为这是因为按钮元素位于第一位。

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

$('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 规范明确规定了隐式提交中发生的情况：

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

如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本字段聚焦时按“回车”键隐式提交表单），那么对于默认按钮具有定义的激活行为必须导致用户代理在该默认按钮上运行合成点击激活步骤。

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

编辑添加：

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

Answer 3

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

Answer 4

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

根据 html 5 按钮规范，没有 type 属性的按钮被视为与带有 type 属性的按钮相同它的类型设置为“提交”，即作为提交其包含表单的按钮。将按钮的类型设置为“按钮”应该可以防止您看到的行为。

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

Answer 5

通过在聚焦的 上按“Enter”，您可以在第一个定位元素上触发“click”事件： 或 <输入类型=“提交”>。如果您在 </code> 中按“Enter”键，则只需创建一个新文本行。

请参阅此处的示例。

您的代码阻止在 </code> 中创建新的文本行，因此您必须仅捕获 <code><input type="text"></code> 的按键。

但为什么需要在文本字段中按 Enter 呢？如果您想通过按“Enter”键提交表单，但 必须保留在布局中的第一个位置，只需使用标记：将

捕获“Enter”并保存标记：

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13) {
        e.preventDefault();
        // also submit by pressing Enter:
        $("form").submit();
    }
});

Answer 6

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

Answer 7

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

Answer 8

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 9

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

Answer 10

我的情况是表单元素中有两个 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>

在不使用任何脚本的情况下，我定义了每个按钮所属的表单使用 ; form="bla" 属性。我将 Delete 按钮设置为不存在的表单，并将我想要在表单的 Enter 键上触发的 Update 按钮设置为该表单用户输入文本时所处的位置。

这是迄今为止唯一对我有用的事情。

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 ;)。其工作方式类似于网站的刷新，即，按下按钮时，除了再次加载网站之外，我不执行任何操作。对我来说效果很好...