CODEWITHSUNDEEP
javascriptjqueryeventstriggerskeypress
mkoryak
mkoryak

Reputation: 57938

Definitive way to trigger keypress events with jQuery

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?

Upvotes: 283

Views: 316408

Answers (10)

nickb
nickb

Reputation: 2930

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

Upvotes: 86

Bek
Bek

Reputation: 3207

It can be accomplished like this docs

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

Upvotes: 1

Ben
Ben

Reputation: 13635

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

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

Upvotes: 4

Abba
Abba

Reputation: 549

I made it work with keyup.

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

Upvotes: 7

Flint O'Brien
Flint O'Brien

Reputation: 526

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'})

Upvotes: 2

Nadia Alramli
Nadia Alramli

Reputation: 114943

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

Upvotes: 385

Weldan Jamili
Weldan Jamili

Reputation: 61

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

no need to map character i guess.

Upvotes: 2

Tomas
Tomas

Reputation: 3204

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.

Upvotes: 74

molokoloco
molokoloco

Reputation: 4602

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

Upvotes: 4

Rodrigo Chacon
Rodrigo Chacon

Reputation: 311

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

Upvotes: 19

Related Questions