触发“click”和“enter”上的事件

时间:2021-11-01 00:00:10

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的帖子进行搜索。我想让用户也按Enter进行搜索。我怎样才能做到这一点?

JQUERY:

JQUERY:

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

HTML:

HTML:

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

7 个解决方案

#1


90  

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.

在usersSearch文本框上使用按键事件并查找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

演示

#2


44  

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

您使用.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);
      });
    }
  });
});

#3


5  

Something like this will work

像这样的东西会起作用

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

#4


2  

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

#5


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
}

#6


0  

Take a look at the keypress function.

看一下按键功能。

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

我相信回车键是13所以你想要的东西如下:

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

#7


0  

you can use below event of keypress on document load.

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

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

Thanks

谢谢

#1


90  

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.

在usersSearch文本框上使用按键事件并查找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

演示

#2


44  

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

您使用.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);
      });
    }
  });
});

#3


5  

Something like this will work

像这样的东西会起作用

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

#4


2  

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

#5


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
}

#6


0  

Take a look at the keypress function.

看一下按键功能。

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

我相信回车键是13所以你想要的东西如下:

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

#7


0  

you can use below event of keypress on document load.

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

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

Thanks

谢谢