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

Posted 2023-02-22

【中文标题】在 `click` 和 `enter` 上触发事件

【英文标题】：Trigger an event on `click` and `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' />

【问题讨论】：

见这里：***.com/questions/699065/…

是的，搜索功能很有用...

【参考方案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();
            
        );

谢谢