複数のフォームを含むページで入力キーを押さえる方法を教えてください。

Question

私は、ページに複数のフォームが含まれており、アプリケーションが特定できないという非常に良い理由で、入力フィールドのいずれかでリターンを押す通常の機能が無効になっているWebアプリケーションを継承しました（つまり、告知されています）。アプリケーションはsubmitボタンがないように設計されています（input type = "submit"のように）、代わりにデザイナーがonclickハンドリングを行っています。ここでは、ページのいずれかに定義されている2つのボタンがあり、イラスト

<input type="button" value="LOGIN" name="btnLoginOk" onclick="submit(); />" 

<input type="button" class="button-click-grey" value="Find Link Partners" 
    onclick="raiseEvent('SubmitForm','',this);" style="cursor:pointer;" /> 

のために含ましかし、私は本当に彼らは、例えば希望する場合、ユーザーがリターンキーを押すことを可能することができるようにしたいです彼らがLOGINに関連付けられたフィールドに入力したばかりの場合、それを検出してアクションをonclick = "submit（）;"

おそらく、jQueryのソリューションがあります。

Answer 1

指が、これは私はあなたがこのためのjQueryやJavaScriptを必要としないと思う

$(document).ready(function() { 
    var focussed_form; 
    $('input').focus(focus_form); 
    $('input').blur(unfocus_form); 
    $('textarea').focus(focus_form); 
    $('textarea').blur(unfocus_form); 
    $('select').focus(focus_form); 
    $('select').blur(unfocus_form); 

    $(document).keypress(function(e) { 
    if(e.keyCode == 13) 
    { 
     $(focussed_form).trigger('submit'); 
    } 
    }); 

    function focus_form(){ 
    focussed_form = $(this).closest('form'); 
    } 

    function unfocus_form(){ 
    focussed_form = NULL; 
    } 

}); 

Answer 2

をうまくいく渡りました。実際にユーザーがフォームを送信するフォーム、または送信ボタンがヒットしたフォームを検出できます（フォームごとに複数の送信ボタンがある場合）。

ことはここでは、使用するコードです：

<form action="http://foo.com/uri" method="POST"> 
    <input type="submit" name="action1a" value="add" /> 
    <input type="submit" name="action1b" value="delete" /> 
</form> 
<form action="http://foo.com/uri" method="POST"> 
    <input type="submit" name="action2a" value="add" /> 
    <input type="submit" name="action2b" value="delete" /> 
    <input type="submit" name="action2c" value="someOtherAction" /> 
</form> 

そして、フォーム処理スクリプトのために、あなたは、単に例えば、送信ボタンの名前を確認します。また

if (isset($_POST['action1a'])) ... // PHP syntax 

、あなたを画像を送信ボタンとして使用することができます。送信ボタンのすべてに同じ名前を使用してその値を確認することができます - すべてのボタンに固有のvalue属性がある場合は、通常の送信ボタンでも行うことができます。

---

編集： もう一つの方法はすなわち、POSTを組み合わせて、値を取得することです：

<form action="http://foo.com/uri?form=1" method="POST"> 
    <input type="submit" name="action" value="add" /> 
    <input type="submit" name="action" value="delete" /> 
</form> 
<form action="http://foo.com/uri?form=2" method="POST"> 
    <input type="submit" name="action" value="add" /> 
    <input type="submit" name="action" value="delete" /> 
</form> 

Answer 3

ページに複数のフォームが含まれており、 アプリケーションが決定（または することができませんので、私は思いますどのように フォームに行動する。

あなたが入力にEnterキーを押し、ブラウザが最初にそのフォームでボタンを提出し、その上でクリックをシミュレート求めて制御します。複数のボタンの場合、最初のものはキーボード入力時に押されます（これは決して石で書かれておらず、ブラウザーはこれから逸脱するかもしれません）。

2つのフォームがある場合、キーを押したフォームにはがあり、最初に送信ボタンが押されています。したがって、これを特別に処理する必要はありません。途中で止めなければなりません。.preventDefault()がされていないことを当然と仮定すると、

$(window).bind('keypress', function(e){ 
    if ($(e.originalTarget).is(':input') && e.keyCode == 13) { 
    $( e.originalTarget) 
     .closest('form') 
     .find('input[type=submit]:first') 
      .click(); 
    } 
}); 

：

あなたは、フォーム上で、コードでこれをシミュレートすることができます

$('form').bind('keypress', function(e){ 
    if (e.keyCode == 13) { 
    $(this).find('input[type=submit]:first').click(); 
    } 
}); 

またはウィンドウ（おおよそ何が起こっているかのデモンストレーションのために）イベントで呼び出されました。

ボトムライン：あなたがイベントを持っている場合は、どのエレメントから来たのか、それがどのフォームに属しているのかを記入することができます。この場合であっても：ここ

<input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();"> 

submit()はグローバル関数ですが、それが呼び出されたときに、そのコンテキスト（this）は要素になりますし、あなたがsubmit(e){ this.form.submit(); }を行うことができます。ボタンが提出全くされているので、

アプリケーション

ではなく、設計者はonclickの取り扱いのために行っている、と（=「送信」入力 タイプのように）設計されていません。

これは、デザイナーがDOM /フォームイベントを完全に理解しておらず、問題を取り巻く長い道のりです。もう一つの理由は、プログラムが古く、今日のようにこれらのものがかなり安定していない、または適切に文書化されていないときに設計されたものである可能性があります。

この置き換えます。次にフォームのために検出して、いくつかの条件が満たされた場合に入力抑制し、それを必要とするすべてのフォームにキーハンドラを、（追加

<form action="/login/" method="POST"> 
    [...] 
    <input type="submit" value="LOGIN" name="btnLoginOk"> 
</form> 

：これにより

<form action="/login/" method="POST"> 
    [...] 
    <input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();"> 
</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プラグイン）を使用します。

Answer 4

あなたはjqueryの中にキーを入力のためのキー押下イベントをバインドすることができます。

$("form").bind("keypress", function(e) { 
    if (e.keyCode == 13) { 
     your_custom_submit_function(); 
     return false; // ignore default event 
    } 
});