77

What the best way to simulate the user pressing "enter"? $(element).keypress() doesn't seem to allow me to pass in the actual key that was pressed.

This is for unit testing.

Gordon
  • 312,688
  • 75
  • 539
  • 559
morgancodes
  • 25,055
  • 38
  • 135
  • 187

2 Answers2

105

Demo Here

var e = jQuery.Event("keypress");
e.which = 13; //choose the one you want
e.keyCode = 13;
$("#theInputToTest").trigger(e);
AdrienBrault
  • 7,747
  • 4
  • 31
  • 42
redsquare
  • 78,161
  • 20
  • 151
  • 159
  • 2
    Thanks redsquare. This solution wasn't obvious to me from the docs -- http://api.jquery.com/trigger/. They show they usage as .trigger( eventType, extraParameters ). Should I have been able to figure that out based on the docs? Is this an officially supported feature. – morgancodes Jul 18 '10 at 19:23
  • @morgancodes, I guess not easily no, it is not explained but hinted at lower down. – redsquare Jul 19 '10 at 01:47
  • 1
    the demo script is poor. check the key used and verify it's the expected key, to be complete. – Luke Stanley Jul 30 '11 at 12:01
  • @Luke Stanley, Thanks for the dig luke - "jQuery normalizes the .which property so you can reliably use it to retrieve the character code". – redsquare Aug 01 '11 at 06:12
  • 1
    The prior test code is different, test and setup are combined. http://jsfiddle.net/yB78c/ try this better test, with and without the keyCode - you will see the bug. What's a dig? – Luke Stanley Aug 01 '11 at 15:08
  • I find jQuery's documentation to be quite a mess too, sometimes I feel they're purposely trying to make it harder to get information. This page of theirs did have some clearer examples though: https://api.jquery.com/event.which/ – Rani Kheir Jan 30 '17 at 05:11
  • @redsquare What if i don't want to use jquery? Is there any javascript alternative? – Chris P Nov 21 '18 at 11:25
100

For those who want to do this in pure javascript, look at:

Using standard KeyboardEvent

As Joe comment it, KeyboardEvent is now the standard.

Same example to fire an enter (keyCode 13):

const ke = new KeyboardEvent('keydown', {
    bubbles: true, cancelable: true, keyCode: 13
});
document.body.dispatchEvent(ke);

You can use this page help you to find the right keyboard event.

Outdated answer:

You can do something like (here for Firefox)

var ev = document.createEvent('KeyboardEvent');
// Send key '13' (= enter)
ev.initKeyEvent(
    'keydown', true, true, window, false, false, false, false, 13, 0);
document.body.dispatchEvent(ev);
Fabien Sa
  • 9,135
  • 4
  • 37
  • 44
  • 11
    Looks like this answer needs updating. KeyboardEvent is standard now: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent (initKeyEvent is deprecated) –  Dec 28 '16 at 01:37
  • Can you answer this question? https://stackoverflow.com/questions/41137575/simulate-pressing-enter-key-on-input-text I thought about copying your answer but I figured you would want to answer it yourself. – Nathan Mar 26 '21 at 20:41
  • const ke = new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 13 });document.querySelectorAll('.search')[0].dispatchEvent(ke); – Eyni Kave Nov 19 '22 at 19:38