首页 文章

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

提问于
浏览 次
107

当在“金额”输入中按“输入”时，此逻辑会触发，我不相信它（它不在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

  • （适用于Chrome）

jquery internet-explorer

5 回答

  • 310

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

    回复于
  • 3

    我今天遇到了这个问题 . 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
    }
});
    回复于
  • 29

    我遇到ASP.NET WebForms的这个问题：

    <asp:Button />

    这不能通过添加type =“button”来解决，因为ASP.NET用type =“submit”替换它（如果你检查元素，你可以在浏览器中看到这种行为 . ）

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

    <asp:Button UseSubmitBehavior="false" />

    到按钮 . ASP会自动添加type =“button”属性 .

    回复于
  • 2

    IE认为任何 button 元素都是 submit 按钮（无论你是否有 form ） . 它还处理在表单元素中按 Enter 键作为隐式表单提交 . 因此，由于它认为您正在尝试提交表单，因此它会帮助您解决 click 事件（它认为是什么） submit 按钮 .

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

    回复于
  • 1

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

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

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

    回复于

相关问题