116

このロジックは、「金額」入力で「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で動作します）
4

6 に答える 6

338

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

于 2012-11-23T19:10:07.550 に答える
34

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

IEのデフォルトの動作をpreventDefault（）でオーバーライドする必要があります。jQueryセレクターで、Enterキーを無視するテキストボックスを含む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
    }
});
于 2012-10-31T20:01:12.403 に答える
4

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

<asp:Button />

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

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

<asp:Button UseSubmitBehavior="false" />

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

于 2016-07-06T01:19:52.843 に答える
3

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

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

于 2012-09-07T20:55:34.107 に答える
1

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

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

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

于 2014-04-29T23:29:09.373 に答える
0

<button type="submit" style="display:none"/> Chromeの場合、Chromeのデフォルトのボタンタイプは「送信」であるため、追加できます。

IEの場合、同じことを試みましたtype="button"（IEのデフォルトのボタンタイプは「ボタン」です​​）が、うまく機能しませんでした。

だからここに解決策があります。HTML(keypress)=xxx($event)でフォームに追加します。TSでは、

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

上記は、クロスブラウザ、通常のクリック、タブフローなどのすべてのシナリオで機能します。

于 2020-05-27T07:27:28.980 に答える