異なる入力で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で動作)
同じ問題があり、type="button"
属性を<button>
要素に追加することで解決しました。これにより、IEはボタンを送信ボタン(デフォルト)ではなく単純なボタンと見なします<button>
要素の動作)。
今日、この問題に遭遇しました。 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
}
});
ASP.NET WebFormsでこの問題が発生していました。
<asp:Button />
これは、ASP.NETがtype = "submit"に置き換えているため、type = "button"を追加するだけでは解決できません(要素を調べると、ブラウザでこの動作を確認できます)。
Asp.netでこれを行う正しい方法は、追加することです
<asp:Button UseSubmitBehavior="false" />
ボタンに。 ASPは、type = "button"属性を自動的に追加します。
IEは、button
要素はsubmitボタンであると考えます(form
があるかどうか)。また、フォーム要素のEnter
キーの押下を暗黙的なフォーム送信として処理します。そのため、フォームを送信しようとしていると考えられるため、submitボタンで(考えられるとおりに)click
イベントを発生させるのに役立ちます。
keyup
イベントをinput
またはbutton
のいずれかに添付して、Enter
キー(e.which === 13
)およびreturn false;
を確認できます。
すべてのボタンに対してこれを行うjQueryベースのソリューションは次のとおりです。
$('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event
ただし、クリックイベントは何らかの理由で親要素にバブルアップします...