Le déclenchement d'un événement sur "click" et "enter"

J'ai un "searchbox" sur mon site. Actuellement, les utilisateurs doivent cliquer sur le bouton "soumettre" à côté de la zone de recherche via jquery post. Je voudrais que les utilisateurs également appuyer sur enter pour effectuer la recherche. Comment puis-je faire cela?

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' />
InformationsquelleAutor kirby | 2012-02-05
  1. 103

    Utilisation keypress événement sur usersSearch zone de texte et recherchez Entrée bouton. Si la touche entrée est pressée, puis déclencher le bouton de recherche, cliquez sur événement qui fera le reste du travail. Essayez cette.

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

});

    Démo

    • Mieux encore: utiliser l'événement keyup au lieu d'assurer votre fonction n'est activée qu'une fois. Grâce à @StevePaulo pour son commentaire dans cette réponse.
    • Un inconvénient de l'utilisation de keyup que je viens de découvrir: Vous ne serez pas en mesure d'empêcher l'action par défaut, parce que l'événement keyup est déclenché uniquement après l'action par défaut de la clé a été exécutée (voir la ici).
    InformationsquelleAutor ShankarSangoli
  2. 53

    Vous appeler à la fois les écouteurs d'événement à l'aide de .on() ensuite utiliser un if l'intérieur de la fonction:

    $(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);
      });
    }
  });
});
    • Pourquoi cette réponse ne permet pas d'obtenir plus de votes? Je veux dire, c'est la moindre des blocs de code (comme de ne pas ajouter un autre événement à déclencher un clic). Tout inconvénient de ceci?
    • A vrai dire, Nin-ay & sagarthapa.
    • Vous avez besoin pour capturer la pression de touche à partir du champ de recherche, puis cliquez sur à partir du bouton de recherche. Ceux sont deux DOM entités, et donc, ce code ne fonctionne pas.
    • Il a travaillé pour moi, mais j'ai dû ajouter de l'e.preventDefault() comme une première ligne afin d'éviter la double exécution
    • TIL: je peux écouter pour plusieurs événements avec on(), n'Avait pas d'idée, vous pouvez le faire!
    InformationsquelleAutor Gustavo Rodrigues
  3. 5

    Quelque chose de ce genre de travail

    $('#usersSearch').keypress(function(ev){
    if (ev.which === 13)
        $('#searchButton').click();
});
    • mais comment puis-je utiliser à la fois, appuyez sur rechercher ou appuyez sur entrée?
    • Vous avez mis le code que j'ai ajouté en plus du code que vous avez déjà. Puis les deux fonctionneront.
    InformationsquelleAutor jopke
  4. 2
    $('#form').keydown(function(e){
    if (e.keyCode === 13) { //If Enter key pressed
        $(this).trigger('submit');
    }
});
    InformationsquelleAutor elclanrs
  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
}
    InformationsquelleAutor xandercoded
  6. 1

    vous pouvez utiliser en dessous de cas de pression de touche sur le document de charge.

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

    Grâce

    InformationsquelleAutor Asif Ghanchi
  7. 0

    Prendre un coup d'oeil à la keypress la fonction.

    Je crois que le enter clé est 13 si vous voulez quelque chose comme:

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