在不同输入(无表单)中按 Enter 键时触发 Button Click 事件

当在“金额”输入中按下“回车”键时，这个逻辑就会启动，我不认为它应该启动(在 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
  • IE9
  • (在 Chrome 中工作)
72391 次浏览
小开

IE 认为任何 button元素都是 服从按钮(不管你有没有 form)。它还将表单元素中 Enter键的按压作为隐式表单提交进行处理。因此，既然它认为你正在尝试提交你的表单，它认为它将帮助你和发射 click事件(它认为是)的 服从按钮。

You can attach a keyup event to either the input or the button and check for the Enter key (e.which === 13) and return false;

小开

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

您必须使用 proventDefault ()覆盖 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
}
});
小开
最佳答案

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

小开

A jQuery based solution that does this for every button is:

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

然而，由于某些原因，点击事件仍然会冒泡到父元素..。

小开

我在 ASP.NET WebForms 上遇到了一个问题:

<asp:Button />

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

The correct way to do this in asp.net is to add 

<asp:Button UseSubmitBehavior="false" />

ASP 会自动添加 type = “ button.”属性。

小开

对于 Chrome，你可以添加 <button type="submit" style="display:none"/> Because In chrome default button type is "submit'

For IE , I have tried to same with type="button"(In IE default button type is "button") 但效果不好。

这就是解决办法。 在 HTML 中添加表单中的 (keypress)=xxx($event)。 In TS,

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

The above will work in all scenarios like cross browsers,normal click, and tab flow.


提交答案