在不同的输入中按 Enter 键时触发按钮单击事件（无表单）答案

【问题标题】：Button Click event fires when pressing Enter key in different input (no forms)在不同的输入中按 Enter 键时触发按钮单击事件（无表单）
【发布时间】：2012-09-01 17:57:24
【问题描述】：

在“金额”输入中按“Enter”时会触发此逻辑，我认为它不应该（Chrome 中没有）。如何防止这种情况，如果在 IE 中不防止，则处理它，以便单击事件中的逻辑不会触发。

<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 中工作）

【问题讨论】：

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

标签： jquery internet-explorer

【解决方案1】：

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

【讨论】：

"提示：始终为
这确实对我有用，但是我还必须阻止 Enter 键提交我的 <input> 所在的表单，因为在我的情况下，我们不希望用户在输入后自动按 Enter在这个字段中的一个值中提交整个表单，所以就我而言，我还需要on(theInputElement, 'keyDown', function (e) { if (e.key === 'Enter') { e.preventDefault(); } }); 之类的东西。我认为这可能会帮助其他处于相同情况的人。（我在这里使用 Dojo 的 dojo/on，jquery 也可以）

【解决方案2】：

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

您必须使用 preventDefault() 覆盖 IE 的默认行为。在您的 jQuery 选择器中，放入包含要忽略回车键的文本框的 div ——在您的情况下，是“页面”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
    }
});

【讨论】：

【解决方案3】：

我在使用 ASP.NET WebForms 时遇到了这个问题：

<asp:Button />

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

在asp.net中正确的做法是添加

<asp:Button UseSubmitBehavior="false" />

到按钮。 ASP 会自动添加 type="button" 属性。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

但是由于某种原因，点击事件仍然会冒泡到父元素...

【讨论】：

【解决方案6】：

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

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

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

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

以上内容适用于跨浏览器、正常点击、标签页流等所有场景。

【讨论】：