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

— rian
source

您可能需要添加return false或e.preventDefault();

— geekchic，2013年

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中找到演示

— 维杰
source

3

如果人们想从任何地方识别“输入”按键，则可以替换$（'＃txtSearchProdAssign'）并在文档$（document）.keypress上触发..

— dave4jr

从可访问性的角度来看，这似乎是有问题的。这对具有不同“选择”方法的所有设备肯定适用吗？

— 强尼

26

试试这个

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

希望对您有帮助

— 内拉吉·杜比（Neeraj Dubey）
source

4

你是说if((event.keyCode || event.which) == 13)吗是的，它是支持TabFF键的完全跨浏览器。

— Hashem Qolami

根据API，event.keyCode是多余的，只能使用event.which。

— konyak 2015年

12

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

我还发现在“回车”上提交表单可以全面涵盖大多数问题。

— 怪胎的
source

8

你快到了这是您可以尝试的方法。

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

我曾经trigger()执行click并将其绑定到keyup事件上，keydown因为click事件实际上包括两个事件，即mousedown then mouseup。因此，与keydown和尽可能相似keyup。

这是一个演示

— 罗希特416
source

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;
  }
});

— 丹尼尔·杜赫斯特
source

1

IMO将switch语句用于单个条件是过大的。

— nyuszika7h 2015年

但是，它比if语句更有效。

— 丹尼尔·德赫斯特

2

我不相信你你能引用消息来源吗？

— 罗尔夫

3

您是否要模仿按下Enter键时对按钮的单击？如果是这样，您可能需要使用trigger语法。

尝试改变

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

至

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

如果这不是问题，请尝试通过查看本文中的解决方案来再次查看您的键捕获语法：jQuery Event Keypress：按下了哪个键？

— 肖恩
source

来自api.jquery.com/click-此方法是前两个变体中.on（“ click”，handler）和第三个变体.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>

— 毗湿奴（Pishad）
source

1

您可以使用此代码

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

— 桑迪普·库马尔
source

1

只需在代码中包含preventDefault（）函数，

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

— 阿龙
source

0

jQuery：Fire Button单击事件使用Enter Button按此尝试：

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

— 吉亚尔·穆斯塔帕
source

0

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

展开摘要

— 苏普里亚
source

-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兼容

— 大足
source

2

这似乎根本没有引起媒体的关注。

— klokop

@klokop您错了，这引起了“返回”或“输入”。我刚刚在FF 63，Chrome 69，Safari 10.0.1和Opera 55上使用jQuery 3进行了尝试，无论是在它们的链接上还是在我创建的用于测试自己的单独网站上。那是我的+1。

— hyperum

您正在使用按钮，请输入将触发按钮和<a>标记，但在跨度或OP具有常规输入字段的情况下，情况并非如此。

— Nickfmc