web-dev-qa-db-ja.com

異なる入力でEnterキーを押すと、ボタンクリックイベントが発生します（フォームなし）

「Amount」入力で「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で動作）
jqueryinternet-explorer
109
contactmatt

同じ問題があり、type="button"属性を<button>要素に追加することで解決しました。これにより、IEはボタンを送信ボタン（デフォルト）ではなく単純なボタンと見なします<button>要素の動作）。

313
pallati

今日、この問題に遭遇しました。 IEは、いずれかのテキストフィールドでEnterキーを押した場合、フィールドがフォームの一部ではなく、ボタンのタイプが "提出する"。

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
    }
});
31
Christian Clinton

ASP.NET WebFormsでこの問題が発生していました。

<asp:Button />

これは、ASP.NETがtype = "submit"に置き換えているため、type = "button"を追加するだけでは解決できません（要素を調べると、ブラウザでこの動作を確認できます）。

Asp.netでこれを行う正しい方法は、追加することです

<asp:Button UseSubmitBehavior="false" />

ボタンに。 ASPは、type = "button"属性を自動的に追加します。

4
Guilherme

IEは、button要素はsubmitボタンであると考えます（formがあるかどうか）。また、フォーム要素のEnterキーの押下を暗黙的なフォーム送信として処理します。そのため、フォームを送信しようとしていると考えられるため、submitボタンで（考えられるとおりに）clickイベントを発生させるのに役立ちます。

keyupイベントをinputまたはbuttonのいずれかに添付して、Enterキー（e.which === 13）およびreturn false;を確認できます。

2
Heretic Monkey

すべてのボタンに対してこれを行うjQueryベースのソリューションは次のとおりです。

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

ただし、クリックイベントは何らかの理由で親要素にバブルアップします...

1
lschult2