テキスト入力フィールドでEnterキーを検出する


299

特定の入力中にEnterキーが押された場合に機能を実行しようとしています。

私は何を間違っているのですか?

$(document).keyup(function (e) {
    if ($(".input1").is(":focus") && (e.keyCode == 13)) {
        // Do something
    }
});

これを行うより良い方法はあり.input1ますか?


回答:


499
$(".input1").on('keyup', function (e) {
    if (e.keyCode === 13) {
        // Do something
    }
});


//keyup not compatible with Jquery select(), Keydown is.

どのブラウザでテストしましたか?古いバージョンのIEはドキュメントのキーアップイベントをトリガーしないと思います(ただし、これについては不明です)。
ジョセフ・シルバー、2011

2
.is()を使用し、==ではなく===が必要なため、コードは機能しませんでした。詳細については、私の回答を参照してください。
wesbos

6
それはないです@jQuerybeast 必要、とevent.keyCodeあるNumberJavaScriptはと同じ手順になりますので、==または===
アレックス

7
e。これは、より有用なクロスブラウザーであると宣言されています
mohammad eslahi sani

2
プロパティwhichcodecharCodeおよびkeyCode推奨されていませんdeveloper.mozilla.org/en-US/docs/Web/API/KeyboardEventは、あなたの答えに実際の情報を追加してください。
Sasay、

120

event.key === "Enter"

より新しく、よりクリーン:を使用しますevent.keyこれ以上の任意の番号コードはありません!

const node = document.getElementsByClassName(".input")[0];
node.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // Do work
    }
});

jQueryを使用する必要がある場合:

$(document).keyup(function(event) {
    if ($(".input1").is(":focus") && event.key == "Enter") {
        // Do work
    }
});

Mozillaドキュメント

サポートされているブラウザ


6
プレーンなJavaScriptバージョンに対する称賛、なぜ他のすべてがjqueryにあるのかわからない
Captain Fantastic

7
なぜなら、OPは彼のサンプルコードをjQueryに入れ、そして(JavaScriptと同様に)jQueryがタグ付けされているからです。
Tigerrrrr

44
$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

または単に入力自体にバインドする

$('.input1').keyup(function (e) {
    if (e.keyCode === 13) {
       alert('ya!')
    }
  });

必要なkeyCodeを把握するには、Webサイトhttp://keycode.infoを使用してください。


ありがとうございました。私は何か新しいことを学びました。ちなみに私は.is()を何度も使用したので、論理的ではなく、機能していません。また、==でも、他の状況では2つの==を使用しました
jQuerybeast

np、常に===を使用する必要があります
wesbos

12

これを試しEnterて、テキストボックスで押されたキーを検出します。

$(function(){

$(".input1").keyup(function (e) {
    if (e.which == 13) {
        // Enter key pressed
    }
 });

});

6

この質問に答えるには遅すぎるかもしれません。しかし、次のコードは単にEnterキーを阻止します。コピーして貼り付けるだけで動作します。

        <script type="text/javascript"> 
        function stopRKey(evt) { 
          var evt = (evt) ? evt : ((event) ? event : null); 
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
          if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
        } 

        document.onkeypress = stopRKey; 

        </script>

6

私が見つけた最良の方法はを使用することですkeydownkeyup私にとってはうまくいきません)。

注:通常、Enterキーを押したときにいくつかのアクションを実行したい場合にフォームを送信するのが嫌なので、フォームの送信も無効にしました。

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});

event.keyCodeは廃止予定のイベントです。そうではないので、こちらの方が良い
Alex


1

テキストボックスで押されたEnterキーを検出するには、これを試してください。

$(document).on("keypress", "input", function(e){
    if(e.which == 13){
        alert("Enter key pressed");
    }
});

デモ


0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });

0

このコードは、サイト全体のすべての入力を処理しました。INPUTフィールド内のEnterキーをチェックし、TEXTAREAまたは他の場所で停止しません。

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.