How do I simulate a cross browser key press that works for alphanumeric and non-printable characters in JavaScript?

Question

This is a more specific question of Is it possible to simulate key press events programmatically? Every answer is missing the following information in one way or another, reducing the question's value. I've tried three things on there already that didn't work in modern browsers, or were advised against by official sources.

Here is what I'm looking for:

1. At the time of answering, every example should work in modern versions of Firefox and Chrome.
2. No examples include deprecated objects, fields, properties, or functions.
3. Every answer should include a way of typing a printable character in a textfield and textarea. As mentioned in a comment below, this can't be done.
4. Every answer should include a way to type an alphanumeric character when an input does not have focus. eg, "a", "b", "c", etc.
5. Every answer should include a way to type a non-printable character. eg, page down, left arrow, the F1 key (if this isn't possible, it's okay to state so), Enter, etc.
6. Every answer should include a link to all the "codes" needed to simulate alphanumeric characters and non-printable characters, or even better, embed that info into the answer. I'm using the term "codes" loosely here: I mean whatever term is appropriate to to satisfy the 2nd point.

Answer 1

This solution fills all of the criteria:

1. This example works in modern versions of chrome and firefox ( https://caniuse.com/dispatchevent ) ( https://caniuse.com/keyboardevent-key )
2. This example does not include anything deprecated
3. N/A
4. Alphanumeric characters are supported
5. This is possible with this solution
6. You can set key equal to one of these values https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values (I would embed this, however, there are a lot of codes)

• Ctrl : Use the ctrlKey option (boolean)
• Alt : Use the altKey option (boolean)
• Shift : Use the shiftKey option (boolean)
• Meta Key/Command Key : use the metaKey option (boolean)

 function simulateKeypress(target, options) { target.dispatchEvent(new KeyboardEvent('keydown', options)); } document.addEventListener("keydown", event => { console.log(event.key); }); setTimeout(() => { simulateKeypress(document, { key: "F1" }); }, 1000);

Answer 2

(As already stated on the linked original question, it is unclear what "simulate" means here . However:)

We maintain a package for simulating user events for testing at @testing-library/user-event .

This includes userEvent.type() API for conveniently simulating keyboard input to input elements as well as userEvent.keyboard() API for simulating keyboard events anywhere. The library simulates the common browser behavior. It will dispatch the key events, change element values, move selection and focus - dependent on the pressed keys and possibly custom event handler that eg stop propagation.

The primary target audience for the library is testing with jest and jsdom , but other environments including testing in real browsers are also supported.

(For examples and further explanations see the linked docs. For missing features, bugs, etc.: Issues and PRs are always welcome at the linked Github repo :) )