javascript - Definitive way to trigger keypress events with jQuery - Stack Overflow

admin管理员组

文章数量:1129108

I've read all the answers on to this questions and none of the solutions seem to work.

Also, I am getting the vibe that triggering keypress with special characters does not work at all. Can someone verify who has done this?

I've read all the answers on to this questions and none of the solutions seem to work.

Also, I am getting the vibe that triggering keypress with special characters does not work at all. Can someone verify who has done this?

• javascript
• jquery
• events
• triggers
• keypress

Share Improve this question Follow edited Dec 23, 2019 at 0:11 mkoryak asked May 6, 2009 at 22:15 mkoryakmkoryak 57.9k6464 gold badges203203 silver badges262262 bronze badges 5

• 15 No you miss understood the concept. This is not how is it supposed to work. trigger will only call the event handler. It will not actually print the key. If you want to simulate the effect of printing the key, then just add the key to the input value and trigger the event at the same time. – Nadia Alramli Commented May 7, 2009 at 0:21
• Interesting, i didnt know that. In that case, can you tell me if triggering the event will also trigger it for non-jquery libs. for example if i have a onKeydown set up in plain JS, will it capture my "fake" event? – mkoryak Commented May 7, 2009 at 16:10
• 2 yes, if there was an onkeydown='...' set up in plain js. It will be triggered by the fake event. I wasn't sure about it. But I made a quick test and it worked. – Nadia Alramli Commented May 7, 2009 at 18:06
• 2 @Nadia Thanks for that! I've read over all the answers wondering why things weren't working before realizing my expectations weren't correct. I suspect a lot of other people will have the same misconceptions. – mikemaccana Commented Jan 14, 2012 at 12:24
• 3 Two years later... reading the page it seem that the definitive way is : $('input#search').trigger($.Event( 'keydown', {which:$.ui.keyCode.ENTER, keyCode:$.ui.keyCode.ENTER})); – molokoloco Commented May 16, 2012 at 12:52

Add a comment  | 

10 Answers 10

Sorted by: Reset to default 385

If you want to trigger the keypress or keydown event then all you have to do is:

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

Slightly more concise now with jQuery 1.6+ and jQuery UI:

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

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

(If you're not using jQuery UI, sub in the appropriate keycode instead.)

The real answer has to include keyCode:

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

Even though jQuery's website says that which and keyCode are normalized they are very badly mistaken. It's always safest to do the standard cross-browser checks for e.which and e.keyCode and in this case just define both.

If you're using jQuery UI too, you can do like this:

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

I made it work with keyup.

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

Ok, for me that work with this...

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}]); 

Of you want to do it in a single line you can use

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

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

no need to map character i guess.

In case you need to take into account the current cursor and text selection...

This wasn't working for me for an AngularJS app on Chrome. As Nadia points out in the original comments, the character is never visible in the input field (at least, that was my experience). In addition, the previous solutions don't take into account the current text selection in the input field. I had to use a wonderful library jquery-selection.

I have a custom on-screen numeric keypad that fills in multiple input fields. I had to...

1. On focus, save the lastFocus.element

2. On blur, save the current text selection (start and stop)

   var pos = element.selection('getPos')
   lastFocus.pos = { start: pos.start, end: pos.end}
   

3. When a button on the my keypad is pressed:

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

It can be accomplished like this docs

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

本文标签： javascriptDefinitive way to trigger keypress events with jQueryStack Overflow