ページには複数のフォームが含まれており、アプリケーションはどのフォームを実行するかを判断できません (または、そう言われています)。
入力コントロールで Enter キーを押すと、ブラウザーはそのフォームの最初の送信ボタンを探し、そのクリックをシミュレートします。複数のボタンの場合、キーボード入力時に最初のボタンが押されます (これは決して石で書かれたものではなく、ブラウザーはこれから逸脱する可能性があります)。
フォームが 2 つある場合、キーを押した方のフォームで最初に送信ボタンが押されます。したがって、これを特別に処理する必要はありません。邪魔するのはやめればいいだけです。
これをフォームのコードでシミュレートできます。
$( 'form' ).bind('keypress', function(e){
if ( e.keyCode == 13 ) {
$( this ).find( 'input[type=submit]:first' ).click();
}
});
またはウィンドウ(大まかに何が起こっているかのデモンストレーション用):
$( window ).bind('keypress', function(e){
if ( $( e.originalTarget ).is( ':input' ) && e.keyCode == 13 ) {
$( e.originalTarget )
.closest( 'form' )
.find( 'input[type=submit]:first' )
.click();
}
});
.preventDefault()
もちろん、イベントで呼び出されていないと仮定します。
結論: イベントがあれば、それがどの要素から来たのか、したがってどのフォームに属しているかを推測できます。この場合でも:
<input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();">
submit()
これはグローバル関数ですが、これが呼び出されると、そのコンテキスト ( this
) が要素になり、 を実行できますsubmit(e){ this.form.submit(); }
。
このアプリケーションは、送信ボタン (input type="submit" など) がないように設計されており、代わりに設計者はオンクリック処理を行っています。
これは、デザイナーがDOM /フォームイベントを完全に理解しておらず、問題を回避しているように思えます。もう 1 つの考えられる理由は、プログラムが古く、これらが現在ほど安定しておらず、適切に文書化されていなかったときに設計されたものである可能性があります。
これを置き換えます:
<form action="/login/" method="POST">
[...]
<input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();">
</form>
これとともに:
<form action="/login/" method="POST">
[...]
<input type="submit" value="LOGIN" name="btnLoginOk">
</form>
次に、それを必要とするすべてのフォームにキーハンドラーを追加します。これは、何らかの条件が満たされた場合に入力を検出して抑制します (実際にこれを無効にしたいフォームの場合)。
// for all forms that POST that have 2+ submit buttons
$( 'form[method=post]:has(:submit:eq(1))' ).bind('keydown', function(e){
// if target is an enter key, input element, and not a button
if ( e.keyCode == 13 && e.target.tagName == 'INPUT' &&
!/^(button|reset|submit)$/i.test( e.target.type ) ) {
return false; // kill event
}
});
またはさらに良いこと: これを行う方法を知っているフォーム検証ライブラリ (または jQuery プラグイン) を使用します。