js - simulate key press without specifying an element

Question

I would like to simulate a key press in JavaScript. preferably without specifying any element.

The way I would like to do it is to use .focus() on an input and then simulate a key press like the character "a".

Just the same thing that would happen if I would press the key myself.

Searching through the internet I found no solution. It might have something to do with the combination of the simulated event and an input field. Sometimes I can catch the events, but there is no input present in the input field.

Note that this should not be considered a duplicate of Is it possible to simulate key press events programmatically? because this does not solve my problem. I have already tried it.

Possible duplicate of [Is it possible to simulate key press events programmatically?](https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically) — Get Off My Lawn, Jun 09 '18 at 17:05
If the possible duplicate does not solve you either problem, please explain in detail what is different, why it does not solve your problem and what the specific error is you're facing (consider creating a minimal example in plnkr/jsfiddle or similar) — Capricorn, Jun 09 '18 at 21:22

Ajanth · Answer 1 · 2018-06-09T17:47:02.040

If you have or can include jQuery, here's the easy way

With jQuery

jQuery.event.trigger({ type: 'keydown', which: 78 }); // press n key

To simulate the keypress event within an input field, use like this

var e = jQuery.Event("keydown");
e.which = 78; // n code value
e.altKey = true; // Alt key pressed
$("#inputBox").trigger(e);

Without jQuery

var kbEvent= document.createEvent("KeyboardEvent");
var initMethod = typeof kbEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

kbEvent[initMethod](
                   "keydown", // event type : keydown, keyup, keypress
                    true, // bubbles
                    true, // cancelable
                    window, // viewArg: should be window
                    false, // ctrlKeyArg
                    false, // altKeyArg
                    false, // shiftKeyArg
                    false, // metaKeyArg
                    78, // keyCodeArg : unsigned long the virtual key code , else 0
                    0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
);
document.dispatchEvent(kbEvent);

The above code infact will not modify the input value for you, it will only simulate keystrokes

See this post for more info How to simulate typing in input field using jQuery?

What you need is : fn.sendKeys

i have seen this code many times, but it does not work. there is nothing appearing in my input field. — pls_help, Jun 09 '18 at 17:11
You might be looking for [this](https://stackoverflow.com/questions/50219800/chrome-simulate-keypress-events-on-input-text-field-using-javascript/50219991) — Justin Liu, Sep 08 '20 at 22:00

aljgom · Answer 2 · 2022-07-22T03:36:20.543

I wrote this answer in Is it possible to simulate key press events programmatically?, which has been updated since this question was asked (2018), and now also includes some info about updating the input element and triggering listeners (spoiler alert, it can be sometimes easy, sometimes harder, or sometimes not doable to my knowledge).

In regards to "not specifying an element", you need an eventTarget (like an element) for dispatchEvent. If you don't use any, then you're running it in the global object, equivalent to window.dispatchEvent() in the browser.

Note: when you specify an element, the event can trigger listeners in other elements (parents) as well because of event bubbling

js - simulate key press without specifying an element

2 Answers2