JQuery：Enterキーを押したときにクリックイベントをトリガーする方法

165

Enterキーを押したときにボタンクリックイベントを実行する必要があります。

現時点では、イベントは発生していません。

可能であれば構文を教えてください。

$(document).on("click", "input[name='butAssignProd']", function () {
   //all the action
});

これは、入力時にクリックイベントを発生させる私の試みです。

$("#txtSearchProdAssign").keydown(function (e) {
  if (e.keyCode == 13) {
    $('input[name = butAssignProd]').click();
  }
});

jquery key-events

— アリアヌル
ソース

あなたはリターン虚偽または含めるする必要がありますe.preventDefault();

— geekchic

4

補足として：e.keyCode完全にクロスブラウザーではありません。e.which代わりに使用してください。

— Hashem Qolami 2013

4

この場合、またはのkeyup代わりに使用するkeypress必要がありkeydownます。keypress/ keydownキーが押されている間、イベントが継続的にトリガーされます：jsbin.com/uzoxuk/1/edit

— Hashem Qolami 2013

307

これを試してください...

$('#txtSearchProdAssign').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

コードスニペットを表示

$(function() {

  $('input[name="butAssignProd"]').click(function() {
    alert('Hello...!');
  });

  //press enter on text area..

  $('#txtSearchProdAssign').keypress(function(e) {
    var key = e.which;
    if (key == 13) // the enter key code
    {
      $('input[name = butAssignProd]').click();
      return false;
    }
  });

});

<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <textarea id="txtSearchProdAssign"></textarea>
  <input type="text" name="butAssignProd" placeholder="click here">
</body>

</html>

スニペットを展開

jsbin.comでデモを探す

— ビジェイ
ソース

3

場合には、人々がどこからでも「入力」キーの押下を認識したい、あなたは$（「＃txtSearchProdAssign」）およびドキュメント$（文書）.keypressにトリガーを.......置き換えることができます

— dave4jr

アクセシビリティの観点からは疑わしく見えます。これは間違いなく、「選択」方法が異なるすべての種類のデバイスで機能しますか？

— ジョニー

26

これを試して

$('#twitterSearch').keydown(function(event){ 
    var keyCode = (event.keyCode ? event.keyCode : event.which);   
    if (keyCode == 13) {
        $('#startSearch').trigger('click');
    }
});

お役に立てば幸い

— ニーラジ・デュベイ
ソース

4

もしかしてif((event.keyCode || event.which) == 13)？はい、それTabはFFのキーをサポートする完全にクロスブラウザです。

— Hashem Qolami 2013

APIによると、event.keyCode冗長event.whichです。使用するだけです。

— コンヤック、2015

12

$('#txtSearchProdAssign').keypress(function (e) {
  if (e.which == 13) {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

また、問題のほとんどを包括的にカバーする「Enter」でフォームを送信することもわかりました。

— オタク女
ソース

8

あなたはほとんどそこにいた。ここにあなたが試すことができるものがあります。

$(function(){
  $("#txtSearchProdAssign").keyup(function (e) {
    if (e.which == 13) {
      $('input[name="butAssignProd"]').trigger('click');
    }
  });
});

私が使用しているtrigger()上で、それをクリックして、バインドを実行するkeyupのinstedイベントkeydownなぜならclick、実際すなわち二つの事象のイベント備えるmousedown、その後mouseup。したがって、keydownおよびを使用して、可能な限り同じものに似せkeyupます。

ここにデモがあります

— Rohit416
ソース

4

作成する別の追加：

たとえばを使用して入力を動的に追加するappend()場合は、jQuery on()関数を使用する必要があります。

$('#parent').on('keydown', '#input', function (e) {
    var key = e.which;
    if(key == 13) {
        alert("enter");
        $('#button').click();
        return false;
    }
});

更新：

これを行うさらに効率的な方法は、switchステートメントを使用することです。あなたもそれをきれいに見つけるかもしれません。

マークアップ：

<div class="my-form">
  <input id="my-input" type="text">
</div>

jQuery：

$('.my-form').on('keydown', '#my-input', function (e) {
  var key = e.which;
  switch (key) {
  case 13: // enter
    alert('Enter key pressed.');
    break;
  default:
    break;
  }
});

— ダニエル・デューハースト
ソース

1

単一の条件にswitchステートメントを使用するIMOはやりすぎです。

— nyuszika7h

ただし、ifステートメントよりも効率的です。

— Daniel Dewhurst、2015

2

私はあなたを信じていません。出典を引用できますか？

— Rolf

3

Enterキーが押されたときにボタンのクリックを模倣しようとしていますか？もしそうなら、あなたは使用する必要があるかもしれませんtrigger構文ます。

変更してみてください

$('input[name = butAssignProd]').click();

に

$('input[name = butAssignProd]').trigger("click");

これが問題ではない場合は、この投稿の解決策を見て、キーキャプチャ構文をもう一度確認してみてください。jQueryEvent Keypress：どのキーが押されましたか？

— ショーン
ソース

api.jquery.com/clickから-このメソッドは、最初の2つのバリエーションでは.on（ "click"、handler）、3つ目のバリエーションでは.trigger（ "click"）のショートカットです。そのため、まったく同じです。

— カプセル、

1

これを試して

<button class="click_on_enterkey" type="button" onclick="return false;">
<script>
$('.click_on_enterkey').on('keyup',function(event){
  if(event.keyCode == 13){
    $(this).click();
  }
});
<script>

— ヴィシュヌプラサード
ソース

1

このコードを使用できます

$(document).keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
       alert('You pressed a ENTER key.');
    }
});

— Sandeep Kumar
ソース

1

コードにpreventDefault（）関数を含めるだけで、

$("#txtSearchProdAssign").keydown(function (e) 
{
   if (e.keyCode == 13) 
   {
       e.preventDefault();
       $('input[name = butAssignProd]').click();
   }
});

— アロン
ソース

0

Jquery：ボタンのクリックイベントを発生させるEnter Button Pressを使用してこれを試してください：

tabindex = "0" onkeypress = "return EnterEvent（event）"

 <!--Enter Event Script-->
    <script type="text/javascript">
        function EnterEvent(e) {
            if (e.keyCode == 13) {
                __doPostBack('<%=btnSave.UniqueID%>', "");
            }
        }
    </script>
    <!--Enter Event Script-->

— ジヤウルムスタファ
ソース

0

     $('#Search').keyup(function(e)
        {
            if (event.keyCode === 13) {
            e.preventDefault();
            var searchtext = $('#Search').val();
            window.location.href = "searchData.php?Search=" + searchtext + '&bit=1';
            }
        });

スニペットを展開

— スプリヤ
ソース

-4

これは現在デフォルトの動作であるように見えるので、これで十分です。

$("#press-enter").on("click", function(){alert("You `clicked' or 'Entered' me!")})

このJSFiddleで試すことができます

テスト：Chrome 56.0およびFirefox（Dev Edition）54.0a2、jQuery 2.2.xおよび3.xを使用

— xDaizu
ソース

2

これは「リターン」プレスをまったく受け取らないようです。

— klokop 2017年

@klokopあなたは間違っています、これは「リターン」または「エンター」をキャッチします。私はFF 63、Chrome 69、Safari 10.0.1、Opera 55のjQuery 3を自分のリンクと別のサイトの両方で試したところ、自分でテストしました。それは私からの+1です。

— hyperum 2018年

ボタンを使用している場合、Enterキーを押すとボタンと<a>タグがトリガーされますが、スパンでは、またはOPに通常の入力フィールドがあるため、これは当てはまりません。

— Nickfmc