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

111

このロジックは、[金額]入力で[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で動作）

jquery internet-explorer

— コンタクトマット
ソース

1

質問に反して、これはChromeとFirefoxで私に起こっただけです。同じ修正（ボタンタイプ）。

— ティムグラント

324

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

— パラティ
ソース

6

Firefoxでも同じ問題が発生しました。type = "button"属性もそれを解決してくれました

— Alexander Fradiani '18 / 01/18

109

千年生きられますように。

— TheBrain

4

素晴らしい修正。ブラウザは、<form>タグ内にある場合、「Enter」でのみ自動送信されると思いました。しかし、私は間違っていたと思います。

— クレイトンベル

2

IE9で怒鳴る日々（私が怒鳴らなければならない他のことで私の一般的な怒鳴り声の間に）とこれが解決策でした。ホットダン。

— phatskat 14年

5

この問題に2、3週間で2回噛まれました。ただ、呼び出すために持っている奇妙な感じtype="button"で<button>要素。はは... :)うまくいけば、次回のためにこれを覚えています。

— サム

32

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

IEのデフォルトの動作をpreventDefault（）でオーバーライドする必要があります。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
    }
});

— クリスチャンクリントン
ソース

カスタムコンポーネントを使用する必要があり、type = "button"を追加できない場合に最適なソリューションです。

— FireZenk 2014

クリントンに感謝、これは私のために働いた。私は最初に「ボタン」タイプのすべてのボタンを作成しようとしましたが、それでも機能しませんでした。次に、Enterキーを押したときに発生するイベントを抑制しなければなりませんでした。

— Rupesh Kumar Tiwari 2017年

どうもありがとうございます。過去2時間、コンピューターに激怒しています。

— エドウィン

4

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

<asp:Button />

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

asp.netでこれを行う正しい方法は、

<asp:Button UseSubmitBehavior="false" />

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

— ギルヘルム
ソース

2

IEは、任意のbutton要素が送信ボタンであると見なします（あるかどうかに関係formなく）。またEnter、フォーム要素でのキーの押下を暗黙的なフォーム送信として処理します。したがって、フォームを送信しようとしていると考えているので、フォームの送信を支援し、clickイベントが（送信されたとは）送信するのに役立ちます。ボタンできます。

またはのkeyupいずれかにイベントをアタッチし、キー（）とinputbuttonEntere.which === 13return false;

— 異端の猿
ソース

1

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

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

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

— lschult2
ソース

0

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

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

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

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

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

— タミル語
ソース