Lösen Sie ein Ereignis auf "Klicken" und "Eingeben" aus

73

Ich habe ein Suchfeld auf meiner Website, das. Derzeit müssen Benutzer auf die Schaltfläche "Senden" neben dem Feld klicken, um über den Beitrag von jquery zu suchen. Ich möchte, dass Benutzer auch die Eingabetaste drücken, um zu suchen. Wie kann ich das machen?

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

jquery jquery-selectors

— kirby
quelle

2

Siehe hier: stackoverflow.com/questions/699065/…

— mowwwalker

Ja, Suchfunktion ist nützlich ...

— elclanrs

110

Verwenden Sie das keypressEreignis im usersSearchTextfeld und suchen Sie nach der EnterSchaltfläche. Wenn die Eingabetaste gedrückt wird, wird das Klickereignis der Suchtaste ausgelöst, das den Rest der Arbeit erledigt. Versuche dies.

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

— ShankarSangoli
quelle

1

Besser noch: Verwenden Sie stattdessen das Keyup-Ereignis, um sicherzustellen, dass Ihre Funktion nur einmal ausgelöst wird. Vielen Dank an @StevePaulo für seinen Kommentar in dieser Antwort .

— Schritte

2

Ein Nachteil der Verwendung von Keyup, den ich gerade entdeckt habe: Sie können die Standardaktion nicht verhindern, da das Keyup-Ereignis erst ausgelöst wird, nachdem die Standardaktion für den Schlüssel ausgeführt wurde (siehe hier ).

— Schritte

62

Sie rufen beide Ereignis-Listener auf und verwenden .on()dann eine ifFunktion innerhalb der Funktion:

$(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);
      });
    }
  });
});

— Gustavo Rodrigues
quelle

10

Warum bekommt diese Antwort nicht mehr Stimmen? Ich meine, dies sind weniger Codeblöcke (wie das Hinzufügen eines weiteren Ereignisses, um einen Klick auszulösen). Irgendwelche Nachteile davon?

— Nin-ya

Wirklich gesagt, Nin-ya & Sagarthapa.

— Himanshu Aggarwal

2

Sie müssen den Tastendruck aus dem Suchfeld und den Klick über die Suchschaltfläche erfassen. Dies sind zwei separate DOM-Entitäten, sodass dieser Code nicht funktioniert.

— Moolie

Es hat bei mir funktioniert, aber ich musste e.preventDefault () als erste Zeile hinzufügen, um eine doppelte Ausführung zu verhindern

— Novasol

TIL: Ich kann auf mehrere Events mit hören on(). Hatte keine Ahnung, dass du das machen könntest!

— Scott Fraley

5

So etwas wird funktionieren

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

— jopke
quelle

aber wie kann ich beides verwenden, suchen oder drücken?

— Kirby

1

Sie fügen den Code, den ich hinzugefügt habe, zusätzlich zu dem Code ein, den Sie bereits haben. Dann werden beide funktionieren.

— Jopke

2

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

— elclanrs
quelle

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
}

— xandercodiert
quelle

1

Sie können das folgende Tastendruckereignis beim Laden des Dokuments verwenden.

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

Vielen Dank

— Asif Ghanchi
quelle

0

Schauen Sie sich die keypress Funktion an .

Ich glaube, der enterSchlüssel ist, 13dass Sie etwas wollen wie:

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

— nolt2232
quelle