jQuery 在不同的输入中按 Enter 键时触发按钮 Click 事件（无表单）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12325066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button Click event fires when pressing Enter key in different input (no forms)
提问by contactmatt
This logic is firing when pressing "Enter" in the "Amount" input, and I don't believe it should (it doesn't in Chrome). How can I prevent this, and if not prevent it in IE, handle it so that the logic in the click event does not fire.
在“金额”输入中按“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>
Script
脚本
$("#btnShare").click(function (e) {
// This logic is firing when pressing "Enter" in the "Amount" input
});
- Jquery: 1.7.2
- IE 9
- (Works in Chrome)
- jQuery：1.7.2
- 浏览器 9
- （适用于 Chrome）
回答by pallati
I had the same problem and solved it by adding type="button"attribute to the <button>element, by which IE thinks the button as a simple button instead of a submit button (which is default behavior of a <button>element).
我遇到了同样的问题并通过向元素添加type="button"属性来解决它<button>，IE 认为按钮是一个简单的按钮而不是提交按钮（这是<button>元素的默认行为）。
回答by Christian Clinton
I ran into this problem today. IE assumes that if you press the enter key in any of the text fields, you want to submit the form -- even if the fields are not part of a form and even if the button is not of type "submit".
我今天遇到了这个问题。IE 假定如果您在任何文本字段中按下 Enter 键，您就想要提交表单——即使这些字段不是表单的一部分，即使按钮不是“提交”类型。
You must override IE's default behavior with preventDefault(). In your jQuery selector, put in the div that contains the text boxes you want to ignore the enter key -- in your case, the "page" div. Instead of selecting the whole div, you could also specify the text boxes you want to ignore specifically.
您必须使用 preventDefault() 覆盖 IE 的默认行为。在您的 jQuery 选择器中，放入包含要忽略 Enter 键的文本框的 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
}
});
回答by Guilherme
I was having this issue with ASP.NET WebForms:
我在使用 ASP.NET WebForms 时遇到了这个问题：
<asp:Button />
This can NOT be solved by just adding type="button" because ASP.NET replaces it with type="submit" (you can see this behavior in the browser if you inspect the element.)
这不能通过添加 type="button" 来解决，因为 ASP.NET 将其替换为 type="submit"（如果您检查元素，您可以在浏览器中看到此行为。）
The correct way to do this in asp.net is to add
在 asp.net 中执行此操作的正确方法是添加
<asp:Button UseSubmitBehavior="false" />
to the button. ASP will automatically add the type="button" attribute.
到按钮。ASP 会自动添加 type="button" 属性。
回答by Heretic Monkey
IE thinks any buttonelement is a submitbutton (whether you have a formor not). It also handles the press of the Enterkey in a form element as an implicit form submission. So, since it thinks you are trying to submit your form, it figures it'll help you out and fire the clickevent on (what it thinks is) the submitbutton.
IE 认为任何button元素都是一个提交按钮（不管你有form没有）。它还将Enter表单元素中的按键按下处理为隐式表单提交。因此，由于它认为您正在尝试提交表单，因此它认为它会帮助您并click在（它认为是的）提交按钮上触发事件。
You can attach a keyupevent to either the inputor the buttonand check for the Enterkey (e.which === 13) and return false;
您可以将keyup事件附加到input或button并检查Enter键 ( e.which === 13) 和return false;
回答by lschult2
A jQuery based solution that does this for every button is:
为每个按钮执行此操作的基于 jQuery 的解决方案是：
$('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event
However the click event will still bubble up to parent elements for some reason...
然而，由于某种原因，点击事件仍然会冒泡到父元素......
回答by Tamil.S
For Chrome you can add <button type="submit" style="display:none"/>Because In chrome default button type is "submit'
对于 Chrome，您可以添加<button type="submit" style="display:none"/>因为在 chrome 中默认按钮类型是“提交”
For IE , I have tried to same with type="button"(In IE default button type is "button")
But didn't worked well.
对于 IE ，我曾尝试与type="button"（在 IE 中默认按钮类型为“按钮”）相同，但效果不佳。
So here is the solution.
In HTML add (keypress)=xxx($event)in your form.
In TS,
所以这是解决方案。在 HTML 中添加(keypress)=xxx($event)您的表单。在 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.
以上适用于所有场景，如跨浏览器、普通点击和标签流。
