Jquery: comment déclencher un événement de clic en appuyant sur la touche Entrée

165

J'ai besoin d'exécuter un événement de clic de bouton en appuyant sur la touche Entrée.

Dans l'état actuel des choses, l'événement ne se déclenche pas.

Veuillez m'aider avec la syntaxe si possible.

$(document).on("click", "input[name='butAssignProd']", function () {
   //all the action
});

c'est ma tentative de déclencher un événement de clic lors de l'entrée.

$("#txtSearchProdAssign").keydown(function (e) {
  if (e.keyCode == 13) {
    $('input[name = butAssignProd]').click();
  }
});
jquery key-events Arianule
la source
Vous devrez peut-être inclure un retour faux ou une.preventDefault();
geekchic
4
Comme remarque: e.keyCoden'est pas complètement navigateur croisé. utiliser à la e.whichplace.
Hashem Qolami
4
Dans ce cas, vous DEVRIEZ utiliser à la keyupplace de keypressou keydown. keypress/ Les keydownévénements se déclenchent en continu tant que la touche est enfoncée: jsbin.com/uzoxuk/1/edit
Hashem Qolami

Réponses:

307

essayez ceci ...

$('#txtSearchProdAssign').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

Afficher l'extrait de code

Trouver une démo sur jsbin.com

Vijay
la source
3
Au cas où les gens voudraient reconnaître la touche "Entrée" de n'importe où, vous pouvez remplacer $ ('# txtSearchProdAssign') et déclencher sur le document $ (document) .keypress .......
dave4jr
Cela semble discutable du point de vue de l'accessibilité. Cela fonctionnera-t-il définitivement sur tous les types d'appareils ayant des méthodes de «sélection» différentes?
Jonny
27

Essaye ça

$('#twitterSearch').keydown(function(event){ 
    var keyCode = (event.keyCode ? event.keyCode : event.which);   
    if (keyCode == 13) {
        $('#startSearch').trigger('click');
    }
});

J'espère que ça vous aide

Neeraj Dubey
la source
4
Voulez-vous dire if((event.keyCode || event.which) == 13)? oui, c'est un navigateur entièrement croisé qui prend Taben charge la clé dans FF.
Hashem Qolami
Selon l' API , event.keyCodeest redondant, il suffit d'utiliser event.which.
konyak
12 
$('#txtSearchProdAssign').keypress(function (e) {
  if (e.which == 13) {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

Je viens également de trouver Soumettre un formulaire sur «Entrée» qui couvre la plupart des problèmes de manière exhaustive.

geekchic
la source
8

Vous y étiez presque. Voici ce que vous pouvez essayer.

$(function(){
  $("#txtSearchProdAssign").keyup(function (e) {
    if (e.which == 13) {
      $('input[name="butAssignProd"]').trigger('click');
    }
  });
});

J'ai utilisé trigger()pour exécuter le clic et le lier sur l' keyupévénement insted de keydownparce que l' clickévénement comprend deux événements en fait, c'est-à-dire mousedownalors mouseup. Donc pour ressembler le plus possible aux choses avec keydownet keyup.

Voici une démo

Rohit416
la source
4

Un autre ajout à faire:

Si vous ajoutez dynamiquement une entrée, par exemple en utilisant append(), vous devez utiliser la on()fonction jQuery .

$('#parent').on('keydown', '#input', function (e) {
    var key = e.which;
    if(key == 13) {
        alert("enter");
        $('#button').click();
        return false;
    }
});

METTRE À JOUR:

Une manière encore plus efficace de faire cela serait d'utiliser une instruction switch. Vous pouvez aussi le trouver plus propre.

Balisage:

<div class="my-form">
  <input id="my-input" type="text">
</div>

jQuery:

$('.my-form').on('keydown', '#my-input', function (e) {
  var key = e.which;
  switch (key) {
  case 13: // enter
    alert('Enter key pressed.');
    break;
  default:
    break;
  }
});
Daniel Dewhurst
la source
1
IMO utilisant une instruction switch pour une seule condition est exagéré.
nyuszika7h
C'est plus efficace qu'une instruction if, cependant.
Daniel Dewhurst
2
Je ne te crois pas. Pouvez-vous citer une source?
Rolf
3

Essayez-vous d'imiter un clic sur un bouton lorsque vous appuyez sur la touche Entrée? Si tel est le cas, vous devrez peut-être utiliser la triggersyntaxe.

Essayez de changer

$('input[name = butAssignProd]').click();

à

$('input[name = butAssignProd]').trigger("click");

Si ce n'est pas le problème, essayez de jeter un second regard sur votre syntaxe de capture de clé en examinant les solutions de cet article: jQuery Event Keypress: Quelle touche a été enfoncée?

Shaun
la source
De api.jquery.com/click - Cette méthode est un raccourci pour .on («clic», gestionnaire) dans les deux premières variantes, et .trigger («clic») dans la troisième. ce serait donc exactement la même chose.
Capsule
1

Essaye ça

<button class="click_on_enterkey" type="button" onclick="return false;">
<script>
$('.click_on_enterkey').on('keyup',function(event){
  if(event.keyCode == 13){
    $(this).click();
  }
});
<script>
Vishnu Prasad
la source
1

Vous pouvez utiliser ce code

$(document).keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
       alert('You pressed a ENTER key.');
    }
});
sandeep kumar
la source
1

Incluez simplement la fonction preventDefault () dans le code,

$("#txtSearchProdAssign").keydown(function (e) 
{
   if (e.keyCode == 13) 
   {
       e.preventDefault();
       $('input[name = butAssignProd]').click();
   }
});
Arron
la source
0

Jquery: Événement de clic sur le bouton d'incendie Utilisation du bouton Entrée Appuyez sur essayez ceci:

tabindex = "0" onkeypress = "return EnterEvent (event)"

 <!--Enter Event Script-->
    <script type="text/javascript">
        function EnterEvent(e) {
            if (e.keyCode == 13) {
                __doPostBack('<%=btnSave.UniqueID%>', "");
            }
        }
    </script>
    <!--Enter Event Script-->
JIYAUL MUSTAPHA
la source
0 

     $('#Search').keyup(function(e)
        {
            if (event.keyCode === 13) {
            e.preventDefault();
            var searchtext = $('#Search').val();
            window.location.href = "searchData.php?Search=" + searchtext + '&bit=1';
            }
        });
Développer l'extrait

Supriya
la source
-4

Cela semble être le comportement par défaut maintenant, il suffit donc de faire:

$("#press-enter").on("click", function(){alert("You `clicked' or 'Entered' me!")})

Vous pouvez essayer dans ce JSFiddle

Testé sur: Chrome 56.0 et Firefox (Dev Edition) 54.0a2, tous deux avec jQuery 2.2.x et 3.x

xDaizu
la source
2
Cela ne semble pas du tout attirer une presse de «retour».
klokop
@klokop Vous vous trompez, cela attrape un «retour» ou «entrée». Je viens de l'essayer moi-même avec jQuery 3 sur FF 63, Chrome 69, Safari 10.0.1 et Opera 55, à la fois sur leur lien et sur un site séparé que j'ai créé pour le tester moi-même. C'est un +1 de ma part.
hyperum
vous utilisez un bouton, enter déclenchera des boutons et des balises <a> mais sur un span disons ou comme OP a un champ de saisie normal ce n'est pas le cas.
Nickfmc