Moyen définitif de déclencher des événements de pression de touche avec jQuery


260

J'ai lu toutes les réponses à ces questions et aucune des solutions ne semble fonctionner.

De plus, j'ai l'impression que le déclenchement de la pression de touche avec des caractères spéciaux ne fonctionne pas du tout. Quelqu'un peut-il vérifier qui a fait cela?


14
Non vous manquez compris le concept. Ce n'est pas ainsi que cela est censé fonctionner. trigger appellera uniquement le gestionnaire d'événements. Il n'imprimera pas réellement la clé. Si vous souhaitez simuler l'effet de l'impression de la clé, ajoutez simplement la clé à la valeur d'entrée et déclenchez l'événement en même temps.
Nadia Alramli

Intéressant, je ne le savais pas. Dans ce cas, pouvez-vous me dire si le déclenchement de l'événement le déclenchera également pour les bibliothèques non jquery. par exemple, si j'ai un onKeydown configuré en JS ordinaire, est-ce qu'il capturera mon "faux" événement?
mkoryak

2
oui, s'il y avait un onkeydown = '...' configuré en plain js. Il sera déclenché par le faux événement. Je n'en étais pas sûr. Mais j'ai fait un test rapide et cela a fonctionné.
Nadia Alramli

2
@Nadia Merci pour ça! J'ai relu toutes les réponses en me demandant pourquoi les choses ne fonctionnaient pas avant de réaliser que mes attentes n'étaient pas correctes. Je soupçonne que beaucoup d'autres personnes auront les mêmes idées fausses.
mikemaccana

3
Deux ans plus tard ... en lisant la page, il semble que la méthode définitive soit: $ ('input # search'). Trigger ($. Event ('keydown', {which: $. Ui.keyCode.ENTER, keyCode: $ .ui.keyCode.ENTER}));
molokoloco

Réponses:


365

Si vous souhaitez déclencher l'événement de pression de touche ou de pression sur la touche, il vous suffit de:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
$("input").trigger(e);

42
la question est de savoir comment déclencher, pas comment capturer
Chad Grant

2
J'ai ajouté un exemple pour déclencher l'événement
Nadia Alramli

4
Très belle réponse. Il convient de noter que jQuery.Event est disponible pour jQuery 1.3 ou supérieur. Il est devenu pertinent dans cette question: stackoverflow.com/questions/1823617/…
artlung

8
Cela n'a pas fonctionné pour moi avec un curseur jQuery UI. J'ai dû définir e.keyCode comme la réponse d'OreiA ci-dessous.
crizCraig

2
fwiw, j'ai eu plus de succès avec 'keyup' pour mon application
marquez le

81

Un peu plus concis maintenant avec jQuery 1.6+ :

var e = jQuery.Event( 'keydown', { which: $.ui.keyCode.ENTER } );

$('input').trigger(e);

(Si vous n'utilisez pas jQuery UI, remplacez-le par le code clé approprié.)


4
N'oubliez pas de remplacer également «keyCode» par «which».
Richard Nienaber

Oui, vous devez définir lequel et keyCode pour être sûr (si l'écouteur d'événements vérifie e.keyCode, cela ne fonctionnera que si vous définissez keyCode lors de la création de l'objet jQuery.Event)
jackocnr

1
jQuery normalise le / keyCode donc mettre l'un ou l'autre devrait faire les deux.
Nigel Angel

+1 pour le lien vers api.jquery.com; et les versions actuelles de jQuery ne normalisent pas le / keyCode, vous devez donc fournir les deux pour des raisons de sécurité
Victor

2
@SamuelLindblom J'aurais dû l'écrire plus clairement: jQuery ne normalise pas les propriétés d'événement passées via .trigger(jQuery.Event('name', props)). Regardez l'exemple jsfiddle.net/9ggmrbpd/1 - les propriétés de l'événement déclenché sont passées telles quelles . Code source: github.com/jquery/jquery/blob/master/src/event.js#L739
Victor

68

La vraie réponse doit inclure keyCode:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
e.keyCode = 50
$("input").trigger(e);

Même si le site Web de jQuery dit que lequel et keyCode sont normalisés, ils se trompent très mal. Il est toujours plus sûr de faire les vérifications standard entre les navigateurs pour e.which et e.keyCode et dans ce cas, il suffit de définir les deux.


34
+1. Soit dit en passant, ce e.keyCode = e.which = 50;serait mieux sur une seule ligne. :)
Sk8erPeter

Je viens de découvrir qu'utiliser seulement keyCodene fonctionnait pas. J'ai dû régler les deux pour le faire fonctionner
Tasos K.

@ Sk8erPeter, ce ne sera pas le cas sauf s'il s'agit d'un concours de codage de
golf

18

Si vous utilisez également jQuery UI, vous pouvez faire ceci:

var e = jQuery.Event("keypress");
e.keyCode = $.ui.keyCode.ENTER;
$("input").trigger(e);

1
e.qui ne semble pas fonctionner avec mon curseur jQuery UI. Merci pour cette réponse. Ça marche.
crizCraig

5

Je l'ai fait fonctionner avec keyup.

$("#id input").trigger('keyup');

3
dans ma question il y a 6 ans, je voulais également définir le code clé, mais je ne savais pas comment.
mkoryak

4

Ok, pour moi qui travaille avec ça ...

var e2key = function(e) {
    if (!e) return '';
    var event2key = {
        '96':'0', '97':'1', '98':'2', '99':'3', '100':'4', '101':'5', '102':'6', '103':'7', '104':'8', '105':'9', // Chiffres clavier num
        '48':'m0', '49':'m1', '50':'m2', '51':'m3', '52':'m4', '53':'m5', '54':'m6', '55':'m7', '56':'m8', '57':'m9', // Chiffres caracteres speciaux
        '65':'a', '66':'b', '67':'c', '68':'d', '69':'e', '70':'f', '71':'g', '72':'h', '73':'i', '74':'j', '75':'k', '76':'l', '77':'m', '78':'n', '79':'o', '80':'p', '81':'q', '82':'r', '83':'s', '84':'t', '85':'u', '86':'v', '87':'w', '88':'x', '89':'y', '90':'z', // Alphabet
        '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter', '27':'esc', '32':'space', '107':'+', '109':'-', '33':'pageUp', '34':'pageDown' // KEYCODES
    };
    return event2key[(e.which || e.keyCode)];
};

var page5Key = function(e, customKey) {
    if (e) e.preventDefault();
    switch(e2key(customKey || e)) {
        case 'left': /*...*/ break;
        case 'right': /*...*/ break;
    }
};

$(document).bind('keyup', page5Key);

$(document).trigger('keyup', [{preventDefault:function(){},keyCode:37}]); 

2

Dans le cas où vous devez prendre en compte le curseur actuel et la sélection de texte ...

Cela ne fonctionnait pas pour moi pour une application AngularJS sur Chrome. Comme Nadia le souligne dans les commentaires originaux, le personnage n'est jamais visible dans le champ de saisie (du moins, c'était mon expérience). De plus, les solutions précédentes ne prennent pas en compte la sélection de texte actuelle dans le champ de saisie. J'ai dû utiliser une merveilleuse bibliothèque jquery-selection .

J'ai un clavier numérique à l'écran personnalisé qui remplit plusieurs champs de saisie. J'ai dû...

  1. Sur focus, enregistrez le lastFocus.element
  2. Sur flou, enregistrez la sélection de texte actuelle (démarrage et arrêt)

    var pos = element.selection('getPos')
    lastFocus.pos = { start: pos.start, end: pos.end}
  3. Lorsqu'une touche du clavier my est enfoncée:

    lastFocus.element.selection( 'setPos', lastFocus.pos)
    lastFocus.element.selection( 'replace', {text: myKeyPadChar, caret: 'end'})

2

Vous voulez le faire en une seule ligne, vous pouvez utiliser

$("input").trigger(jQuery.Event('keydown', { which: '1'.charCodeAt(0) }));

1

console.log( String.fromCharCode(event.charCode) );

pas besoin de mapper le personnage je suppose.


1

Cela peut être accompli comme ces documents

$('input').trigger("keydown", {which: 50});

1
Cela ne semble pas fonctionner car il utilise l'argument extraParameters qui ne définit rien à l'intérieur de l'argument d'événement mais ajoute des arguments supplémentaires au rappel du gestionnaire d'événements.
TimeWaster

1
Pas une solution valide
Entwickler
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.