Trigger an event on `click` and `enter`

2019-03-07 22:03发布

I have a searchbox on my site that. Currently, users must click the submit button next to the box to search via jquery's post. I would like to let users also press enter to search. How can i do this?

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

7条回答
霸刀☆藐视天下
2楼-- · 2019-03-07 22:08

You call both event listeners using .on() then use a if inside the function:

$(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);
      });
    }
  });
});
查看更多
三岁会撩人
3楼-- · 2019-03-07 22:11

Take a look at the keypress function.

I believe the enter key is 13 so you would want something like:

$('#searchButton').keypress(function(e){
    if(e.which == 13){  //Enter is key 13
        //Do something
    }
});
查看更多
倾城 Initia
4楼-- · 2019-03-07 22:16

Use keypress event on usersSearch textbox and look for Enter button. If enter button is pressed then trigger the search button click event which will do the rest of work. Try this.

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

查看更多
够拽才男人
5楼-- · 2019-03-07 22:18
$('#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
}
查看更多
Fickle 薄情
6楼-- · 2019-03-07 22:19

Something like this will work

$('#usersSearch').keypress(function(ev){
    if (ev.which === 13)
        $('#searchButton').click();
});
查看更多
Luminary・发光体
7楼-- · 2019-03-07 22:24
$('#form').keydown(function(e){
    if (e.keyCode === 13) { // If Enter key pressed
        $(this).trigger('submit');
    }
});
查看更多
登录 后发表回答