283

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?

Improve this question
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. 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? 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. 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. 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})); Commented May 16, 2012 at 12:52

10 Answers 10

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);
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I added an example for triggering the event
Very nice answer. Worth noting that jQuery.Event is available for jQuery 1.3 or greater. It became relevant in this question: stackoverflow.com/questions/1823617/…
This did not work for me with a jQuery UI slider. I had to set e.keyCode like OreiA's answer below.
fwiw, I had more success with 'keyup' for my application
I had to do e.keyCode = 32;
|
86

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

Improve this answer

6 Comments

Just remember to substitute 'keyCode' for 'which' as well.
Yes you must define which and keyCode to be safe (if the event listener checks for e.keyCode, it will only work if you define keyCode when creating the jQuery.Event object)
jQuery normalises which/keyCode so putting either in should do both.
+1 for the link to api.jquery.com; and current jQuery versions don't normalize which/keyCode, so you should supply both for safety
@SamuelLindblom I should've written it more clear: jQuery don't normalize event properties passed via .trigger(jQuery.Event('name', props)). Look at example jsfiddle.net/9ggmrbpd/1 - properties of triggered event are passed as is. Source code: github.com/jquery/jquery/blob/master/src/event.js#L739
|
74

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.

Improve this answer

3 Comments

+1. By the way, e.keyCode = e.which = 50; in a single line would be nicer. :)
I just found out that using only keyCode didn't work. Had to set both to make it work
@Sk8erPeter it won't unless it's a golph coding competition
19

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);
Improve this answer

1 Comment

e.which does not seem to work with my jQuery UI slider. Thanks for this answer. It does work.
7

I made it work with keyup.

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

1 Comment

in my question 6 years ago, I also wanted to set the keycode, but didnt know how.
4

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

Comments

4

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

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

Comments

2

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

no need to map character i guess.

Improve this answer

Comments

2

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'})
Improve this answer

Comments

1

It can be accomplished like this docs

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

2 Comments

This does not seem to work because this uses the extraParameters argument which does not set anything inside the event argument but adds extra arguments to the event handler callback.
Not a valid solution

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.