在不同输入中按Enter键时会触发Button Click事件（无格式）

111

当在“金额”输入中按“ Enter”键时，就会触发此逻辑，但我不认为应该这样做（Chrome中没有）。我该如何防止这种情况发生，如果不能在IE中阻止这种情况，请对其进行处理，以使click事件中的逻辑不会触发。

<html>
 <body>
   <div id="page">
     <div id="financed_amount">
      <h1>Financed Amount:</h1>
      <input type="text" id="amount" value="" />
     </div>
     <h1>Finance Options</h1>
     <div>
      <a id="shareLink" rel="leanModal" name="email" href="#email"></a>
      <button id="btnShare" class="share">Share this report</button>
     </div>
    </div>
   </body>
</html>

脚本

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});

jQuery的：1.7.2
IE 9
（适用于Chrome）

jquery internet-explorer

— 接触垫
source

1

与问题相反，Chrome和Firefox只是发生在我身上。相同的修复方法（按钮类型）。

— 蒂姆·格兰特

324

我遇到了同样的问题，并通过将type="button"属性添加到<button>元素来解决了该问题，IE认为按钮是简单按钮，而不是提交按钮（这是<button>元素的默认行为）。

— 帕拉蒂
source

6

我在Firefox中也遇到了同样的问题。type =“ button”属性也为我解决了问题

— Alexander Fradiani

109

愿你活一千年。

— TheBrain 2013年

4

出色的修复。我认为浏览器仅在<form>标记内时才会在“ Enter”上自动提交。但是我看到我错了。

— 克莱顿·贝尔

2

在IE9上大喊大叫的日子（介于我大吼大叫的其他事情之间），这就是解决方案。热啊

— phatskat 2014年

5

在短短几周内就两次被该问题咬伤。不得不type="button"在一个<button>元素中调用只是感觉很奇怪。哈哈... :)希望我下次能记住这一点。

— 山姆

32

我今天遇到了这个问题。IE假定，如果您在任何文本字段中按Enter键，则您要提交表单-即使这些字段不是表单的一部分，并且按钮不是“提交”类型。

您必须使用preventDefault（）覆盖IE的默认行为。在您的jQuery选择器中，将div包含要忽略回车键的文本框（在本例中为“ page” div）。除了选择整个div，您还可以指定要忽略的文本框。

$('#page').keypress(function(e) {
    if(e.which == 13) { // Checks for the enter key
        e.preventDefault(); // Stops IE from triggering the button to be clicked
    }
});

— 克林顿（Christian Clinton）
source

当您需要使用自定义组件并且不能添加type =“ button”时的最佳解决方案。

— FireZenk 2014年

谢谢克林顿，这对我有用。我首先尝试使“按钮”类型的所有按钮仍然无法正常工作。然后，我不得不抑制Enter键按下时事件冒泡的情况。

— Rupesh Kumar Tiwari

非常感谢。最近2个小时，我一直在疯狂地浏览我的计算机。

— Edwin

4

我在使用ASP.NET WebForms时遇到此问题：

<asp:Button />

这不能仅通过添加type =“ button”来解决，因为ASP.NET将其替换为type =“ submit”（如果您检查元素，则可以在浏览器中看到此行为。）

在asp.net中执行此操作的正确方法是添加

<asp:Button UseSubmitBehavior="false" />

按钮。ASP将自动添加type =“ button”属性。

— 吉尔赫姆
source

2

IE认为任何button元素都是一个提交按钮（无论您有form没有）。它还处理Enter作为隐式表单提交的表单元素中的按键按下。因此，由于它认为您正在尝试提交表单，因此它认为它将帮助您并click在“ 提交”按钮上触发事件（它认为是）。

您可以将keyup事件附加到input或，button然后检查Enter键（e.which === 13）和return false;

— 异端猴子
source

1

一个针对每个按钮执行此操作的基于jQuery的解决方案是：

 $('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event

但是，由于某种原因，click事件仍会上升到父元素。

— lschult2
source

0

对于Chrome，您可以添加，<button type="submit" style="display:none"/> 因为在Chrome中，默认按钮类型为“提交”

对于IE，我尝试过与type="button"IE 相同（在IE中，默认按钮类型为“按钮”），但效果不佳。

所以这是解决方案。在HTML中添加(keypress)=xxx($event)您的表单。在TS中

xxx(event) {
 if(event.key === 'Enter' && event.target.type !== 'submit')
event.preventDefault():
}

以上内容适用于所有情况，例如跨浏览器，正常点击和标签流。

— 泰米尔语
source