Comment détecter en appuyant sur Entrée sur le clavier en utilisant jQuery?

731

Je voudrais détecter si l'utilisateur a appuyé Entersur jQuery.

Comment est-ce possible? Faut-il un plugin?

EDIT: Il semble que je doive utiliser la keypress()méthode.

Je voulais savoir si quelqu'un savait s'il y avait des problèmes de navigateur avec cette commande - comme y a-t-il des problèmes de compatibilité de navigateur que je devrais connaître?

javascript jquery keyboard-events enter jquery-events chris
la source
lien à ce sujet .keypress () | Documentation de l'API jQuery
Haim Evgi
5
L'une des meilleures choses dans les frameworks Javascript est qu'ils devraient être compatibles par défaut entre plusieurs navigateurs. Ils gèrent les vérifications de compatibilité du navigateur afin que l'utilisateur n'ait pas à le faire. Je n'ai pas lu le code source de JQuery mais je doute que la fonctionnalité de pression de touche soit différente dans ce sens.
miek
2
le seul problème de compatibilité du navigateur est que vous devez utiliser e.which au lieu de e.keyCode pour détecter le code ascii.
Daniel
1
stackoverflow.com/questions/302122/…
Lemo

Réponses:

1330

L'intérêt de jQuery est que vous n'avez pas à vous soucier des différences de navigateur. Je suis sûr que vous pouvez en toute sécurité enterêtre 13 dans tous les navigateurs. Donc, avec cela à l'esprit, vous pouvez le faire:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
Paolo Bergantino
la source
7
Je fais un lien vers cela parce que j'ai lu cela et je me suis gratté la tête pour savoir pourquoi la touche ne fonctionnait pas avec IE. (il ne se liera pas $(window)sous IE) quirksmode.org/dom/events/keys.html
Incognito
17
e.keyCode n'est pas 100% cross browser. utilisez e.which à la place comme indiqué ci-dessous
Daniel
15
De la documentation jQuery "La propriété event.which normalise event.keyCode et event.charCode. Il est recommandé de regarder event.which pour la saisie des touches du clavier."
Riccardo Galli
20
$ (document) .on ('keypress', fonction (e) {
user956584
5
Je reçois plusieurs exécutions de la fonction donnée en raison de la propagation des événements (c'est-à-dire que l'alerte est lancée deux fois). Pour arrêter cela, ajoutez une e.stopPropagation () à la fin de la fonction
dpb
129

J'ai écrit un petit plugin pour faciliter la liaison d'un événement "à la touche entrée enfoncée":

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

Usage:

$("#input").enterKey(function () {
    alert('Enter!');
})
Andrea
la source
Cela ne fonctionne pas pour moi (je suis #inputsur le <input>terrain)
Rápli András
1
Qu'en est-il si l'élément #input sera dynamique?
Jigar7521
@mplungjan ne sais pas ce que vous entendez par «déléguer»
Andrea
$("#input").on("someevent","someselector",function () {})
mplungjan
62

Je n'ai pas pu faire fonctionner le code posté par @Paolo Bergantino mais quand je l'ai changé $(document)et e.whichau lieu de cela, e.keyCodeje l'ai trouvé fonctionner sans problème.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Lien vers l'exemple sur JS Bin

Ian Roke
la source
Pour moi, e.which ne fonctionne pas avec IE. Ça marche pour les autres?
Umesh Rajbhandari
Quelle version d'IE? Fonctionne très bien pour moi sur IE7.
Ian Roke
De la documentation jQuery "La propriété event.which normalise event.keyCode et event.charCode. Il est recommandé de regarder event.which pour la saisie des touches du clavier."
Riccardo Galli
52

J'ai trouvé que c'était plus compatible avec tous les navigateurs:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});
jesal
la source
1
Votre IF ternaire peut être raccourci en: var keycode = event.keyCode || event.which;
pistol-pete
29

Vous pouvez le faire en utilisant le descripteur d'événement jquery 'keydown'

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });
Nasruddin
la source
11

Utilisez event.keyet JS moderne!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

ou sans jQuery:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Documents Mozilla

Navigateurs pris en charge

Gibolt
la source
9

J'ai passé quelque temps à trouver cette solution, j'espère qu'elle aide quelqu'un.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});
Samuel Kwame Antwi
la source
8

Il existe une méthode d'événement keypress () . Le numéro ascii de la touche Entrée est 13 et ne dépend pas du navigateur utilisé.

Richard Simões
la source
7

Une extension mineure de la réponse d'Andrea ci-dessus rend la méthode d'aide plus utile lorsque vous pouvez également capturer des pressions d'entrée modifiées (c'est-à-dire ctrl-enter ou shift-enter). Par exemple, cette variante permet la liaison comme:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

pour soumettre un formulaire lorsque l'utilisateur appuie sur ctrl-entrée en mettant l'accent sur la zone de texte de ce formulaire.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(voir aussi Ctrl + Entrée jQuery dans TEXTAREA )

joeln
la source
4

Dans certains cas, vous devrez peut-être supprimer la ENTERclé pour une certaine zone d'une page mais pas pour d'autres zones d'une page, comme la page ci-dessous qui contient un en- tête <div> avec un champ RECHERCHE .

Il m'a fallu un peu de temps pour comprendre comment le faire, et je publie ici cet exemple simple mais complet pour la communauté.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

Lien vers JSFiddle Playground : le [Submit]bouton ne fait rien, mais en appuyant ENTERsur l'un des contrôles de la zone de texte, le formulaire ne sera pas envoyé.

jp2code
la source
2

Étant donné que l' keypressévénement n'est couvert par aucune spécification officielle, le comportement réel rencontré lors de son utilisation peut différer d'un navigateur à l'autre, d'une version à l'autre et d'une plateforme à l'autre.

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>
Développer l'extrait

J'espère que ce serait utile!

Zoe_NS
la source
À noter, la raison pour laquelle keypressn'est pas dans les spécifications (plus) est qu'elle est obsolète ( MDN ).
YellowAfterlife
donc, j'ai édité ... tnx <3
Zoe_NS
0

Le moyen facile de détecter si l'utilisateur a appuyé sur Entrée est d'utiliser le numéro de clé, le numéro de clé d'entrée est = 13 pour vérifier la valeur de la clé dans votre appareil

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

en appuyant sur la touche Entrée, vous obtiendrez le résultat 13. en utilisant la valeur clé, vous pouvez appeler une fonction ou faire ce que vous voulez

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

si vous souhaitez cibler un bouton une fois la touche Entrée enfoncée, vous pouvez utiliser le code 

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

J'espère que ça aide

user2216399
la source
0

Je pense que la méthode la plus simple serait d'utiliser du javacript vanille :

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
Duan Walker
la source
0 
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
Tayfun Açıkgöz
la source
3
Pourriez-vous ajouter quelques commentaires explicatifs pour expliquer au demandeur comment fonctionne votre code - merci.
SaschaM78
0 
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
AzizAhmad
la source
Cela ressemble à une adaptation d'autres réponses - pourriez-vous ajouter quelques explications pour rendre la vôtre aussi intéressante que les autres?
Nico Haase
0

J'ai utilisé $(document).on("keydown").

Sur certains navigateurs keyCoden'est pas pris en charge. La même chose avec whichdonc si keyCoden'est pas pris en charge, vous devez utiliser whichet vice versa.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Développer l'extrait

Justin Liu
la source