jQueryを使用してキーボードでEnterキーを押すことを検出する方法は？

731

ユーザーがEnterjQueryを使用して押したかどうかを検出したいと思います。

これはどのようにして可能ですか？プラグインは必要ですか？

編集：keypress()メソッドを使用する必要があるようです。

そのコマンドにブラウザの問題があるかどうか誰かが知っているかどうか知りたい-私が知っておくべきブラウザの互換性の問題はあるか？

javascript  jquery  keyboard-events  enter  jquery-events 
— クリス
ソース
— Haim Evgi 09年
5
Javascriptフレームワークの最も優れた点の1つは、デフォルトでブラウザ間の互換性があることです。ブラウザーの互換性チェックを処理するので、ユーザーが行う必要はありません。私はJQueryのソースコードを読んだことはありませんが、キープレスの機能がその意味で異なるとは思えません。
— miek
2
ブラウザの互換性に関する唯一の問題は、ASCIIコードを検出するためにe.keyCodeの代わりにe.whichを使用する必要があることです。
— Daniel
1
— レモ

回答:

1330

jQueryの要点は、ブラウザーの違いを気にする必要がないことです。私はenterすべてのブラウザで13であっても安全に移動できると確信しています。それを念頭に置いて、これを行うことができます：

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
— パオロベルガンティーノ
ソース
7
私はこれを読んでいて、キープレスがIEで機能しない理由を頭にかき残したので、これにリンクしています。（$(window)IE ではバインドされません）quirksmode.org/dom/events/keys.html
— インコグニート
17
e.keyCodeは100％クロスブラウザーではありません。代わりにe.whichを使用してください
— Daniel
15
jQueryドキュメントから「event.whichプロパティは、event.keyCodeとevent.charCodeを正規化します。キーボードのキー入力については、event.whichを監視することをお勧めします。」
— リカルドガリ
20
$（document）.on（ 'keypress'、function（e）{
— user956584
5
イベントの伝播（つまり、アラートが2回スローされる）が原因で、指定された関数が複数回実行されています。これを停止するには、関数の最後にe.stopPropagation（）を追加します
— dpb
129

「Enterキーが押された」イベントをバインドしやすくするために、小さなプラグインを作成しました。

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

使用法：

$("#input").enterKey(function () {
    alert('Enter!');
})
— アンドレア
ソース
これは私のための仕事（私が得ない#input上<input>フィールド）
— Rápliアンドラーシュ
1
#input要素が動的になる場合はどうですか？
— Jigar7521
@mplungjanが「委任」の意味がわからない
— Andrea
$("#input").on("someevent","someselector",function () {})
— mplungjan
62

@Paolo Bergantinoが投稿したコードを機能させることができませんでしたが、コードをに変更すると$(document)、e.whichその代わりに、問題なく機能するe.keyCodeことがわかりました。

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

JS Binの例へのリンク

— イアン・ローク
ソース
私にとっては、これはIEでは動作しません。それは他の人のために働きますか？
— Umesh Rajbhandari 2012
どのバージョンのIEですか？IE7でうまく動作します。
— Ian Roke
jQueryドキュメントから「event.whichプロパティは、event.keyCodeとevent.charCodeを正規化します。キーボードのキー入力については、event.whichを監視することをお勧めします。」
— リッカルド・ガリ
52

私はこれがクロスブラウザ互換であることがわかりました：

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});
— ジェサル
ソース
1
Ternary IFは次のように短縮できます：var keycode = event.keyCode || event.which;
— ピストルピート
29

あなたはjquery 'keydown'イベントハンドルを使用してこれを行うことができます

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });
— ナスルディン
ソース
9

私はいつかこの解決策を考え出すことに費やしました。誰かの助けになることを願っています。

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});
— サミュエルクワメアントウィ
ソース
7

上記のAndreaの回答を少し拡張すると、変更されたEnterプレス（Ctrl-EnterまたはShift-Enter）もキャプチャしたい場合に、ヘルパーメソッドがより便利になります。たとえば、このバリアントは次のようなバインディングを許可します。

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

ユーザーがそのフォームのテキストエリアにフォーカスを置いてctrl-enterを押したときにフォームを送信する。

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

（TEXTAREAでCtrl + Enter jQueryも参照）

— Joeln
ソース
4

場合によってENTERは、ページの特定の領域ではキーを非表示にする必要がありますが、SEARCHフィールドを持つヘッダー <div>を含む以下のページのように、ページの他の領域では必要ありません。

これを行う方法を理解するのに少し時間がかかりました。このシンプルで完全な例をここにコミュニティのために投稿しています。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

JSFiddle Playgroundへのリンク：[Submit]ボタンは何もしませんENTERが、テキストボックスコントロールの1つから押してもフォームは送信されません。

— jp2code
ソース
2

keypressイベントは公式の仕様ではカバーされていないため、イベントを使用したときに実際に発生する動作は、ブラウザー、ブラウザーのバージョン、およびプラットフォームによって異なる場合があります。

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>
スニペットを展開

お役に立てれば幸いです。

— Zoe_NS
ソース
注意すべき点として、keypress仕様に（もう）含まれていない理由は、廃止されたためです（MDN）。
— YellowAfterlife
そう、lは編集しました... tnx <3
— Zoe_NS
0

ユーザーがEnterキーを押したかどうかを検出する簡単な方法は、キー番号を使用することです。Enterキー番号は= 13で、デバイスのキーの値を確認します

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

Enterキーを押すと、13の結果が得られます。キー値を使用して、関数を呼び出したり、好きなことをしたりできます

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

Enterキーが押されたときにボタンをターゲットにする場合は、コードを使用できます 

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

それが役に立てば幸い

— user2216399
ソース
0 
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
— テイフンアチュコズ
ソース
3
あなたのコードがどのように機能するかを質問者に説明するために、少し説明的なコメントを追加できますか？
— SaschaM78
0 
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
— アジズアフマド
ソース
これは他の回答の改作のように見えます。あなたの説明を他の回答と同じくらい面白くするために説明を追加できますか？
— Nico Haase
0

使用しました$(document).on("keydown")。

一部のブラウザkeyCodeではサポートされていません。同じのでwhich、keyCodeサポートされていない場合は、使用する必要があり、which逆も同様です。

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
スニペットを展開

— ジャスティン・リュー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.