在 `click` 和 `enter` 上触发事件答案

【问题标题】：Trigger an event on `click` and `enter`在 `click` 和 `enter` 上触发事件
【发布时间】：2012-02-27 03:12:08
【问题描述】：

我的网站上有一个搜索框。目前，用户必须单击框旁边的提交按钮才能通过 jquery 的帖子进行搜索。我想让用户也按回车键进行搜索。我该怎么做？

查询：

$('document').ready(function(){
    $('#searchButton').click(function(){
        var search = $('#usersSearch').val();
        $.post('../searchusers.php',{search: search},function(response){
            $('#userSearchResultsTable').html(response);
        });
    });
});

HTML：

<input type='text' id='usersSearch'  /><input type='button' id='searchButton' value='search' />

【问题讨论】：

见这里：stackoverflow.com/questions/699065/…
是的，搜索功能很有用...

标签： jquery jquery-selectors

【解决方案1】：

这样的事情会起作用

$('#usersSearch').keypress(function(ev){
    if (ev.which === 13)
        $('#searchButton').click();
});

【讨论】：

但我如何同时使用两者，按搜索或按回车键？
您将我添加的代码添加到您已有的代码中。然后两者都可以工作。

【解决方案2】：

在usersSearch 文本框上使用keypress 事件并查找Enter 按钮。如果按下输入按钮，则触发搜索按钮单击事件，该事件将完成其余工作。试试这个。

$('document').ready(function(){
    $('#searchButton').click(function(){
        var search = $('#usersSearch').val();
        $.post('../searchusers.php',{search: search},function(response){
            $('#userSearchResultsTable').html(response);
        });
    })
    $('#usersSearch').keypress(function(e){
        if(e.which == 13){//Enter key pressed
            $('#searchButton').click();//Trigger search button click event
        }
    });

});

Demo

【讨论】：

更好的是：使用 keyup 事件来确保你的函数只被触发一次。感谢@StevePaulo 在this answer 中的评论。
我刚刚发现的使用 keyup 的一个缺点：您将无法阻止默认操作，因为 keyup 事件仅在的默认操作之后触发密钥已被执行（见here）。

【解决方案3】：

$('#form').keydown(function(e){
    if (e.keyCode === 13) { // If Enter key pressed
        $(this).trigger('submit');
    }
});

【讨论】：

【解决方案4】：

看看keypressfunction。

我相信 enter 键是 13 所以你会想要这样的东西：

$('#searchButton').keypress(function(e){
    if(e.which == 13){  //Enter is key 13
        //Do something
    }
});

【讨论】：

【解决方案5】：

$('#usersSearch').keyup(function() { // handle keyup event on search input field

    var key = e.which || e.keyCode;  // store browser agnostic keycode

    if(key == 13) 
        $(this).closest('form').submit(); // submit parent form
}

【讨论】：

【解决方案6】：

您使用.on() 调用两个事件侦听器，然后在函数内使用if：

$(function(){
  $('#searchButton').on('keypress click', function(e){
    var search = $('#usersSearch').val();
    if (e.which === 13 || e.type === 'click') {
      $.post('../searchusers.php', {search: search}, function (response) {
        $('#userSearchResultsTable').html(response);
      });
    }
  });
});

【讨论】：

为什么这个答案没有得到更多的选票？我的意思是这是较少的代码块（比如不添加另一个事件来触发点击）。这有什么缺点吗？
说真的，Nin-ya & sagarthapa。
您需要从搜索字段中捕获按键，并从搜索按钮中捕获单击。这是两个独立的 DOM 实体，所以这段代码不起作用。
它对我有用，但我必须添加 e.preventDefault() 作为第一行以防止双重执行
TIL：我可以用on() 监听多个事件，没想到你能做到！

【解决方案7】：

您可以在文档加载时使用以下按键事件。

 $(document).keypress(function(e) {
            if(e.which == 13) {
               yourfunction();
            }
        });

谢谢

【讨论】：