Jquery：如何在按下回车键时触发点击事件答案

【问题标题】：Jquery: how to trigger click event on pressing enter keyJquery：如何在按下回车键时触发点击事件
【发布时间】：2013-08-12 04:35:52
【问题描述】：

我需要在按下回车键时执行一个按钮点击事件。

目前事件没有触发。

如果可能，请帮助我了解语法。

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

这是我尝试在输入时触发点击事件。

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

【问题讨论】：

您可能必须包含 return false 或 e.preventDefault();
附带说明：e.keyCode 并非完全跨浏览器。请改用e.which。
在这种情况下，您应该使用keyup 而不是keypress 或keydown。 keypress/keydown 按键按下时连续触发事件：jsbin.com/uzoxuk/1/edit
现代方式：e.key === 'Enter'（在所有现代浏览器甚至 IE9+ 中都支持）。我将在 7 年后回来发布新的“现代”技术。

标签： jquery key-events

【解决方案1】：

试试这个....

$('#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>

Find Demo in jsbin.com

【讨论】：

如果人们想从任何地方识别“输入”按键，您可以替换 $('#txtSearchProdAssign') 并在文档 $(document).keypress 上触发......
从可访问性的角度来看是有问题的。这肯定适用于具有不同“选择”方法的所有类型的设备吗？

【解决方案2】：

试试这个

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

希望对你有帮助

【讨论】：

您的意思是if((event.keyCode || event.which) == 13)？是的，它是完全跨浏览器，支持Tab FF 键。
根据API，event.keyCode是多余的，使用event.which即可。

【解决方案3】：

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

我也刚刚找到Submitting a form on 'Enter'，它涵盖了大部分问题。

【讨论】：

【解决方案4】：

你快到了。不过，您可以尝试以下方法。

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

我使用trigger() 执行单击并将其绑定在keydown 的keyup 事件上，因为click 事件实际上包含两个事件，即mousedown 然后mouseup。所以要尽可能与keydown 和keyup 相似。

这是Demo

【讨论】：

【解决方案5】：

另一个补充：

如果您要动态添加输入，例如使用 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;
  }
});

【讨论】：

IMO 对单个条件使用 switch 语句是矫枉过正。
不过，它比 if 语句更有效。
我不相信你。你能引用一个来源吗？

【解决方案6】：

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

尝试改变

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

到

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

如果这不是问题，请尝试通过查看这篇文章中的解决方案来再次查看您的密钥捕获语法：jQuery Event Keypress: Which key was pressed?

【讨论】：

来自api.jquery.com/click - 此方法是前两个变体中 .on( "click", handler ) 和第三个变体中 .trigger( "click" ) 的快捷方式。所以这将完全一样。

【解决方案7】：

只需在代码中包含 preventDefault() 函数，

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

【讨论】：

【解决方案8】：

试试这个

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

【讨论】：

【解决方案9】：

Jquery：触发按钮单击事件使用输入按钮按下试试这个::

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

【讨论】：

【解决方案10】：

您可以使用此代码

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

这是我的首选解决方案。

    $("#text").keyup(function(event) {
        if (event.which === 13) {
            $("#submit").click();
        }
    });

超级简单，超级 jQuery。

【讨论】：

【解决方案13】：

现在这似乎是默认行为，所以这样做就足够了：

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

你可以try it in this JSFiddle

测试于：Chrome 56.0 和 Firefox（开发版）54.0a2，均使用 jQuery 2.2.x 和 3.x

【讨论】：

这似乎根本没有抓住“回归”新闻。
@klokop 你错了，这会捕获“返回”或“输入”。我刚刚在 FF 63、Chrome 69、Safari 10.0.1 和 Opera 55 上使用 jQuery 3 自己尝试过，无论是在他们的链接上，还是在我自己创建的一个单独的网站上测试它。这是我的 +1。
您正在使用一个按钮，输入将触发按钮和标签，但在跨度上说或者因为 OP 有一个常规输入字段，情况并非如此。