在点击和输入时触发事件


73

我的网站上有一个搜索框。当前,用户必须单击框旁边的“提交”按钮才能通过jquery的帖子进行搜索。我想让用户也按Enter键进行搜索。我怎样才能做到这一点?

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


是的,搜索功能很有用……
elclanrs 2012年

Answers:


110

keypressusersSearch文本框中使用事件并查找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
        }
    });

});

演示版


1
更妙的是:使用keyup事件来确保仅触发一次功能。感谢@StevePaulo在此答案中的评论。
步骤

2
我刚刚发现的使用keyup的缺点:您将无法阻止默认操作,因为keyup事件仅执行键的默认操作才会触发(请参见此处)。
步骤

62

您可以使用调用两个事件监听器,.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);
      });
    }
  });
});

10
为什么这个答案得不到更多的选票?我的意思是这是较少的代码块(例如不添加其他事件来触发点击)。有什么缺点吗?
2015年

说真的,Ninya和sagarthapa。
Himanshu Aggarwal

2
您需要从搜索字段中捕获按键,并从搜索按钮中单击。那是两个单独的DOM实体,因此此代码无法正常工作。
Moolie

它对我有用,但我必须添加e.preventDefault()作为第一行以防止重复执行
Novasol,

TIL:我可以通过收听多个事件on(),但不知道您可以这样做!
Scott Fraley

5

这样的事情会起作用

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

但是如何同时使用按搜索或按Enter键?
kirby 2012年

1
除了已经添加的代码之外,您还添加了我添加的代码。然后两者都会起作用。
2012年

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

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

1

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

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

谢谢


0

看一下keypress 功能

我相信enter关键是13这样,您将需要以下东西:

$('#searchButton').keypress(function(e){
    if(e.which == 13){  //Enter is key 13
        //Do something
    }
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.