Question jQuery Event Keypress: Quelle touche a été enfoncée?


Avec jQuery, comment puis-je savoir quelle touche a été enfoncée lorsque je me suis connecté à l'événement de pression de touche?

$('#searchbox input').bind('keypress', function(e) {});

Je veux déclencher un soumettre quand ENTRER est pressé.

[Mettre à jour]

Même si j'ai trouvé le (ou mieux: un) me répondre, il semble y avoir de la place pour la variation;)

Y a-t-il une différence entre keyCode et which - Surtout si je cherche juste ENTRER, qui ne sera jamais une clé Unicode?

Est-ce que certains navigateurs fournissent une propriété et d'autres fournissent l'autre?


670
2017-11-19 14:59


origine


Réponses:


En fait c'est mieux:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }

803
2017-11-19 15:07



Essaye ça

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});

127
2017-11-19 15:05



Si vous utilisez l'interface utilisateur jQuery, vous avez des traductions pour les codes de clé communs. Dans ui / ui / ui.core.js:

$.ui.keyCode = { 
    ...
    ENTER: 13, 
    ...
};

Il y a aussi quelques traductions dans tests / simulate / jquery.simulate.js mais je n'en ai trouvé aucun dans la bibliothèque principale de JS. Rappelez-vous, j'ai simplement grep'ed les sources. Peut-être qu'il y a un autre moyen de se débarrasser de ces nombres magiques.

Vous pouvez également utiliser String.charCodeAt et .fromCharCode:

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true

60
2017-11-19 16:22



Étant donné que vous utilisez jQuery, vous devez absolument utiliser .which. Oui, différents navigateurs définissent des propriétés différentes, mais jQuery les normalise et définit la valeur .which dans chaque cas. Voir la documentation à http://api.jquery.com/keydown/ il est dit:

Pour déterminer quelle touche a été enfoncée, nous pouvons examiner l'objet d'événement transmis à la fonction de gestionnaire. Bien que les navigateurs utilisent des propriétés différentes pour stocker ces informations, jQuery normalise la propriété .which afin que nous puissions l'utiliser de manière fiable pour récupérer le code clé.


38
2018-03-05 17:47



... cet exemple empêche la soumission de formulaire (régulièrement l'intention de base lors de la saisie de la séquence de touches n ° 13):

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});

30
2018-05-12 22:58



 // in jquery source code...
 if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) {
     event.which = event.charCode || event.keyCode;
 }

 // So you have just to use
 $('#searchbox input').bind('keypress', function(e) {
     if (e.which === 13) {
         alert('ENTER WAS PRESSED');
     }
 });

26
2018-05-07 15:35



edit: Cela ne fonctionne que pour IE ...

Je me rends compte que c'est une vieille publication, mais quelqu'un pourrait trouver cela utile.

Les événements clés sont mappés. Ainsi, au lieu d'utiliser la valeur du code-clé, vous pouvez également utiliser la valeur de la clé pour la rendre plus lisible.

$(document).ready( function() {
    $('#searchbox input').keydown(function(e)
    {
     setTimeout(function ()
     { 
       //rather than using keyup, you can use keydown to capture 
       //the input as it's being typed.
       //You may need to use a timeout in order to allow the input to be updated
     }, 5);
    }); 
    if(e.key == "Enter")
    {
       //Enter key was pressed, do stuff
    }else if(e.key == "Spacebar")
    {
       //Spacebar was pressed, do stuff
    }
});

Voici une feuille de triche avec les clés mappées que j'ai obtenues Blog enter image description here


25
2018-01-08 01:27



Commander l'excellent jquery.hotkeys plugin qui supporte les combinaisons de touches:

$(document).bind('keydown', 'ctrl+c', fn);

20
2017-07-20 19:21



$(document).ready(function(){
    $("#btnSubmit").bind("click",function(){$('#'+'<%=btnUpload.ClientID %>').trigger("click");return false;});
    $("body, input, textarea").keypress(function(e){
        if(e.which==13) $("#btnSubmit").click();
    });
});

J'espère que cela peut vous aider !!!


14
2018-02-17 11:18



D'accord, j'étais aveugle:

e.which

contiendra le code ASCII de la clé.

Voir https://developer.mozilla.org/En/DOM/Event.which


6
2017-11-19 15:01