web-dev-qa-db-ja.com

複数のフォームを含むページで押されているEnterキーをキャプチャするにはどうすればよいですか？

ページに複数のフォームが含まれているという非常に正当な理由で、入力フィールドのいずれかでReturnキーを押す通常の機能が無効になっていて、アプリケーションが判別できない（または、そう言われている）Webアプリケーションを継承しました。 ）どのフォームからアクションを実行するか。アプリケーションは、（input type = "submit"のように）送信ボタンがないように設計されており、代わりに、設計者はonclick処理を行っています。これは、説明のために含まれている、ページの1つで定義されている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;" />

しかし、私は本当にユーザーが望むならリターンを押すことができるようにしたいと思っています。ログインに関連付けられたフィールドに入力したばかりの場合は、それを検出してonclick = "submit（）;"を実行します。

おそらく、jQueryを使用した解決策があります。

javascriptjqueryuser-inputreturnkeyboard-events
16
MysticBrook

ページには複数のフォームが含まれており、アプリケーションはどのフォームを実行するかを決定できません（または、そう言われます）。

入力コントロールで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"のように）送信ボタンがないように設計されており、代わりに、デザイナーはonclick処理を行っています。

これは、設計者が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プラグイン）を使用します。

36
Borgar

JqueryでEnterキーのキープレスイベントをバインドできます。

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

指が交差したこれはうまくいくでしょう

$(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;
  }

});
3
wheresrhys

これにはjQueryやjavascriptは必要ないと思います。実際に、ユーザーがどのフォームに送信ボタンを押すか、またはどの送信ボタンが押されるか（フォームごとに複数の送信ボタンがある場合）を検出できます。

使用するコードは次のとおりです。

<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がある場合は、通常の送信ボタンでもこれを行うことができます。属性。

<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>
2
Calvin