85

Using jQuery, how can I simulate (trigger?) a KeyPress when a link is clicked? For example, when a user clicks the following link:

<a id="clickforspace" href="#">Click Here</a>

Then, by clicking the link, it would be as if they pressed the "spacebar" on their keyboard.

Something like this, I'm assuming:

$("#clickforspace").click(function(e) { 
    e.preventDefault(); 
    //... Some type of code here to initiate "spacebar" //
                                      });

Any ideas on how to achieve this?

gsamaras
  • 71,951
  • 46
  • 188
  • 305
Dodinas
  • 6,705
  • 22
  • 76
  • 108
  • I am curious - when trying to replace `click` with spacebar, did you actually want the browser to scroll down on the page? Pressing spacebar on a link usually has the same effect as pressing the page down key. – Joel Purra Feb 09 '12 at 09:47
  • 2
    [This](http://stackoverflow.com/questions/596481/simulate-javascript-key-events) might answer your question. – themis Sep 23 '09 at 20:50

5 Answers5

143

I believe this is what you're looking for:

var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 40;
$("whatever").trigger(press);

From here.

Andrew Culver
  • 1,967
  • 2
  • 13
  • 7
  • 19
    This will not produce any actual text if used with input control for example. – Alex Burtsev Jul 04 '13 at 17:13
  • 5
    @AlexBurtsev - You're right, that is because this only triggers the event handler as if the specificed key was pressed, but not actually presses that key like happens when a key is pressed on the keyboard (probably due to security reasons) – BornToCode Aug 04 '13 at 07:19
  • 7
    Is there a reason you intermingle '$' and 'jQuery'? – Danny Andrews Jun 12 '15 at 03:22
  • 4
    What you wrote didn't work for me in jQuery 2.2.3 on Chrome. :( But this did: `$("whatever").trigger($.Event("keydown", {keyCode: 40}))` – Jonathan Benn May 25 '17 at 13:18
  • 2
    Building on Jonathan Benn's method, you can also use the same technique to send the key instead of sending a keycode (since keycodes are marked as deprecated). For instance: $("whatever").trigger($.Event("keyup", {key: "Enter"})) — and optionally, as shown, with different keyboard events. – Alan M. Feb 17 '19 at 22:11
  • @AlanM. I tried many options but only yours worked: $("whatever").trigger($.Event("keyup", {key: "Enter"})). Thank you so much. – Gail Foad Jan 05 '23 at 17:00
43

Another option:

$(el).trigger({type: 'keypress', which: 13, keyCode: 13});

http://api.jquery.com/trigger/

Denis Ivanov
  • 905
  • 10
  • 16
15

The keypress event from jQuery is meant to do this sort of work. You can trigger the event by passing a string "keypress" to .trigger(). However to be more specific you can actually pass a jQuery.Event object (specify the type as "keypress") as well and provide any properties you want such as the keycode being the spacebar.

http://docs.jquery.com/Events/trigger#eventdata

Read the above documentation for more details.

Dmitriy Likhten
  • 5,076
  • 7
  • 36
  • 47
  • 58
    Sure, read the documentation, but the poster probably already knew that. The jQuery events documentation is a bit opaque. Andrew Culver gave a direct answer, plus a reference for more information. – Roy Leban Jul 01 '12 at 02:12
13

You could try this SendKeys jQuery plugin:

http://bililite.com/blog/2011/01/23/improved-sendkeys/

$(element).sendkeys(string) inserts string at the insertion point in an input, textarea or other element with contenteditable=true. If the insertion point is not currently in the element, it remembers where the insertion point was when sendkeys was last called (if the insertion point was never in the element, it appends to the end).

Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
  • You don't need jQuery to use this, you can use the same functionality by just getting the `bililiteRange` library: https://github.com/dwachss/bililiteRange (in fact, the jQuery plugin is just a thin wrapper around this incredible library that stands on its own). – fiatjaf Sep 26 '14 at 19:24
5

This works:

var event = jQuery.Event('keypress');
event.which = 13; 
event.keyCode = 13; //keycode to trigger this for simulating enter
jQuery(this).trigger(event);
Dave Jarvis
  • 30,436
  • 41
  • 178
  • 315
Anoop P S
  • 754
  • 1
  • 12
  • 31
  • 1
    [var event = jQuery.Event('keypress'); event.which = 13; event.keyCode = 13; jQuery(this).trigger(event);] try this – Anoop P S Jul 25 '13 at 06:01
  • I needed to click Enter in a dialog, so with the snippet here, I replaced *this* with *#myEl* .. thanks – Gene Bo Oct 01 '14 at 18:41