web-dev-qa-db-ja.com

ユーザーがテキストボックスにEnterキーを押したときのJQueryイベント

ユーザーがテキストボックスのEnterボタンを押したときにのみトリガーされるJqueryのイベントはありますか？またはこれを含めるために追加できるプラグインはありますか？そうでなければ、どのように私はこれを行うだろうクイックプラグインを書くのでしょうか？

javascriptjavascript-eventsjquery
234
Click Upvote

あなたはあなた自身のカスタムイベントを結び付けることができます

$('textarea').bind("enterKey",function(e){
   //do stuff here
});
$('textarea').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

http://jsfiddle.net/x7HVQ/

423
Jishnu A P
   $('#textbox').on('keypress', function (e) {
         if(e.which === 13){

            //Disable textbox to prevent multiple submit
            $(this).attr("disabled", "disabled");

            //Do Stuff, submit, etc..

            //Enable the textbox again if needed.
            $(this).removeAttr("disabled");
         }
   });
86
Etienne Dupuis

これはあなたのためのプラグインです：（Fiddle： http://jsfiddle.net/maniator/CjrJ7/ ）

$.fn.pressEnter = function(fn) {  

    return this.each(function() {  
        $(this).bind('enterPress', fn);
        $(this).keyup(function(e){
            if(e.keyCode == 13)
            {
              $(this).trigger("enterPress");
            }
        })
    });  
 }; 

//use it:
$('textarea').pressEnter(function(){alert('here')})
37
Neal

それを行うためのjqueryプラグインがあります。

(function($) {
    $.fn.onEnter = function(func) {
        this.bind('keypress', function(e) {
            if (e.keyCode == 13) func.apply(this, [e]);    
        });               
        return this; 
     };
})(jQuery);

それを使うには、コードをインクルードして次のように設定します。

$( function () {
    console.log($("input"));
    $("input").onEnter( function() {
        $(this).val("Enter key pressed");                
    });
});

ここjsfiddlehttp://jsfiddle.net/VrwgP/30/

15
jzilla

よく知られた jQueryでのlive()の使用は、バージョン1.7以降は 非推奨 であり、jQuery 1.9では削除されたになっています。代わりに、on()の使用をお勧めします。

以下の潜在的な課題を解決するので、バインディングのための次の方法論を強くお勧めします。

  1. イベントをdocument.bodyにバインドし、on()の2番目の引数として$ selectorを渡すことで、再バインドまたは二重バインドのイベントを処理する必要なしに、要素をDOMにアタッチ、デタッチ、追加、または削除できます。これは、イベントが直接document.bodyではなく$selectorにアタッチされているためです。つまり、$selectorを追加、削除、および追加し直すことができ、それにバインドされたイベントはロードされません。
  2. off()の前にon()を呼び出すことで、このスクリプトは、誤って二重結合のイベントを心配することなく、ページの本体内、またはAJAX呼び出しの本体内に配置できます。
  3. スクリプトを$(function() {...})内にラップすることによって、このスクリプトはページの本体、またはAJAX呼び出しの本体のいずれかによって再びロードできます。 $(document).ready()はAJAXリクエストでは起動しませんが、$(function() {...})は起動しません。

これが一例です。

<!DOCTYPE html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var $selector = $('textarea');

        // Prevent double-binding
        // (only a potential issue if script is loaded through AJAX)
        $(document.body).off('keyup', $selector);

        // Bind to keyup events on the $selector.
        $(document.body).on('keyup', $selector, function(event) {
          if(event.keyCode == 13) { // 13 = Enter Key
            alert('enter key pressed.');
          }
        });
      });
    </script>
  </head>
  <body>

  </body>
</html>
7
Joshua Burns

HTMLコード：-

<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />      

<input type="button" id="btnclick">

Javaスクリプトコード

function AddKeyPress(e) { 
        // look for window.event in case event isn't passed in
        e = e || window.event;
        if (e.keyCode == 13) {
            document.getElementById('btnEmail').click();
            return false;
        }
        return true;
    }

フォームにデフォルトの送信ボタンがありません

3
yogesh lodha

入力がsearchの場合は、on 'search'イベントも使用できます。例

<input type="search" placeholder="Search" id="searchTextBox">

。

$("#searchPostTextBox").on('search', function () {
    alert("search value: "+$(this).val());
});
1
Phan Van Linh

もう一つの微妙なバリエーション。私はちょっとした権限の分離に行きました、それで私はenterキーを捕らえることを可能にするためにプラグインを持っています、そして私はただ通常イベントにバインドします：

(function($) { $.fn.catchEnter = function(sel) {  
    return this.each(function() { 
        $(this).on('keyup',sel,function(e){
            if(e.keyCode == 13)
              $(this).trigger("enterkey");
        })
    });  
};
})(jQuery);

そして使用中：

$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });

このバリエーションでは、イベントの委任を使用できます（まだ作成していない要素にバインドするため）。

$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });
1
Wilco

JQueryのドキュメントを読むまで、Enterボタンのkeypressイベントを取得できず、しばらく頭を悩ませました。

"keypressイベントは、ブラウザがキーボード入力を登録するときに要素に送信されます。これは、Shiftキー、Escキー、deleteトリガーなどの修飾キーと非印刷キーを除き、keydownイベントに似ています。キー押下イベントではなくキー押下イベント。）（ https://api.jquery.com/keypress/ ）

keyupまたはkeydownイベントを使用して、Enterボタンの押下をキャッチする必要がありました。

0
Arne M