How can I simulate a keypress in JavaScript?

Question

I'm trying to find a way to simulate a keypress.

For example, when function launched, the key "Arrow Down" should be pressed and so the webpage should be slightly scrolled.

I'm interested only in Chrome, and both jQuery or plain JS will be appropriate. (Plain JS will be more preferable).

That's one of the code examples I tried:

var e = $.Event("keydown", { keyCode: 40}); // 40 = down arrow
$("body").trigger(e);
// When I launch it the console, nothing happens. The page is not scrolled.
// May be I missed some obvious?

I searched and found the following related questions, but the solutions did not work for me:

In other words

Using AutoHotkey, you can easily make something like:

Down::
Send, {Up}

Then, if you press Down arrow key, it will be triggered Up. I just want to implement it with JS.

This might sound silly, but did you import `jQuery` in your `HTML`? — AMACB, Feb 02 '16 at 01:51
AFAIK triggering a keydown event will just make any keydown handlers process. You can't actually make the browser scroll, since scrolling is not done by a JavaScript keydown event. Why can't you directly scroll the document using `scrollTop` manipulation? — Amadan, Feb 02 '16 at 01:55
Maybe use [`jquery.simulate.js`](https://github.com/jquery/jquery-simulate/) I've not used it but it is mentioned in the [docs for .trigger()](https://learn.jquery.com/events/triggering-event-handlers/) — Wesley Smith, Feb 02 '16 at 02:06
I agree with @Amadan, this just seems silly, and is a classic X/Y problem. You're trying to trigger a keypress on an arrow key, just to scroll the page down a bit, when you can do that with just `$(window).scrollTop(100)` etc. — adeneo, Feb 02 '16 at 02:08
@Amadan (To Amadan and Adeneo). The actual case is not just a scrolling, but creating an extension for web file manager. So, `scrollToTop` will not work in real case. But if it is really impossible (or very very hacky), this could be posted as answer. I will wait a bit, and if another solutions would not came up, then I will accept this answer. — user90726, Feb 02 '16 at 02:18
What do you mean by "web file manager", and what do you mean by "extension"? Also, please read about [XY problems](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) and why they are a bad idea. If you want to ask about extending a web file manager (whatever that is), ask about that. — Amadan, Feb 02 '16 at 03:35
It won't answer your question directly, but it might shine some light in your search for a solution http://stackoverflow.com/a/13821309/1949694 — rfsbsb, Feb 03 '16 at 12:23
Yes, it's quite clear statement. I think it could be an accepted answer, if you post it here. Also may be you know something about [mouse clicks](http://stackoverflow.com/questions/35173988) :-) — user90726, Feb 03 '16 at 12:30

score 12 · Accepted Answer · edited May 23 '17 at 12:26

12

As @rfsbsb pointed out from: Jquery script for simulated key press down not running keyboard shortcut

If you're trying to fire some browser or system wide keyboard shortcut then it's a dead end - it can't be done for security reasons. If it would be possible, you would have pages all over the Internet that would (for example) add themself to your bookmarks without even asking (by firing CTRL+B shortcut using Javascript).

edited May 23 '17 at 12:26

Community

1
1

answered Feb 06 '16 at 19:59

Gavriel

18,880
12
68
105

Arigato! this info helped – Aashutosh Rathi Apr 03 '22 at 07:47

score 5 · Answer 2 · edited Apr 23 '21 at 03:03

5

Using this answer, I managed to change the code a bit and I think I got what you are looking for?

here is my jsfiddle

Code:

jQuery(document).ready(function($) {
    $('body').keypress(function(e) {
        if(e.which == '40') 
            $('body').animate({scrollTop: '100px'});
    });
});
jQuery.fn.simulateKeyPress = function(character) {
    jQuery(this).trigger({
        type: 'keypress',
        which: character
    });
};

 setTimeout(function() {
    $('body').simulateKeyPress(40);
 }, 1000);

edited Apr 23 '21 at 03:03

Redoman

3,059
3
34
62

answered Feb 04 '16 at 10:03

Haring10

1,517
1
19
37

1

and what is that `40`, could you put any minimal explanation? – T.Todua Sep 30 '20 at 14:18

score 3 · Answer 3 · answered Feb 10 '16 at 20:14

Here is a sample starting from @Haring10's example:

https://jsfiddle.net/po33vfb4/4/

$('body').keydown(function(e) {
  e.preventDefault();
  e.stopImmediatePropagation();

  if(e.which == 40) {
    window.scrollBy(0, -100);
  } else {
    window.scrollBy(0, 100);
  }
});

Triggering keydown-keyup-keypress programatically does not seem to have the efect of scrolling. The above sample can be customized to add animations.

How can I simulate a keypress in JavaScript?

3 Answers3

Linked