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

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

$(function() {

  $('input[name="butAssignProd"]').click(function() {
    alert('Hello...!');
  });

  //press enter on text area..

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

});

<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <textarea id="txtSearchProdAssign"></textarea>
  <input type="text" name="butAssignProd" placeholder="click here">
</body>

</html>

Développer l'extrait

Trouver une démo sur jsbin.com

— Vijay
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
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
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
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
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
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
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
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
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
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
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
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