Develop Reference

Maintaining a map of which keys are down in the presence of Undo, Copy, etc

I'm building a web application with a fullscreen canvas that needs to react to continuous and discrete keyboard input.
My current approach is similar to the one in this question: JavaScript keep track of which keys are down accurately.
I maintain a set of which keys are currently pressed using keyEvent.code to differentiate keys. I query this set in the requestAnimationFrame loop of my application. I update the set in event handlers for the 'keyup' and 'keydown' events attached to window.
The Problem
When pressing and releasing Cmd+Z to undo, the 'keydown' event fires but the 'keyup' event does not (at least in the latest Firefox, Chrome, and Edge on macOS 10.15.6).
Consequently, my set contains an entry for 'KeyZ' even though the Z key on the keyboard is not being held. Similarly, Cmd+C, Cmd+V, and many other system shortcuts seem to hijack the 'keyup' event.
Why am I not getting a 'keyup' event in this case? What can I do to ensure that my set accurately reflects the state of the currently held keys on the keyboard?
What I've Tried
This seems like it could be related to event propagation, so I tried using keyEvent.stopPropagation() and keyEvent.preventDefault() in the keydown event handler.
I've tried pressing Control+Z instead, which does fire a 'keyup' event.
Problem Reproduction
const listenerTarget = window;
const useCapture = false;
const heldKeys = new Set();
listenerTarget.addEventListener('keydown', (keyEvent) => {
const code = keyEvent.code;
if (!keyEvent.repeat) {
console.log(`${code} went down`);
heldKeys.add(code);
} else {
console.log(`${code} went down (repeat)`);
}
keyEvent.stopPropagation();
keyEvent.preventDefault();
}, useCapture);
listenerTarget.addEventListener('keyup', (keyEvent) => {
const code = keyEvent.code;
// Why does this not fire if
// the 'keydown' happened in combination with
// a Meta key?
console.log(`${code} went up`);
heldKeys.delete(code);
}, useCapture);
Workaround Update (11/03/2020)
I found When CMD key is kept pressed, keyup is not triggered for any other key and http://web.archive.org/web/20160304022453/http://bitspushedaround.com/on-a-few-things-you-may-not-know-about-the-hellish-command-key-and-javascript-events/, which indicate that this is known behavior. My current workaround is to not add codes to the set of held keys if keyEvent.metaKey is set. Doing this at least ensures that the set of held keys doesn't contain phantom entries. I'll keep this question open in case someone can think of a better approach.

For me it works just fine on the lates chrome version..
Sorry.

This isn't super helpful, but there's a bunch of good info here: https://unixpapa.com/js/key.html. You've probably already seen that in other answers though.
I say not super helpful because it doesn't really answer your particular question, but it does show that there's definite weirdness between browser versions and both modifier keys and branded keys. I suspect the answer is that the branded keys like the windows key and cmd key just act weird because they tend to trigger system level events. I would just use different keys, but hopefully someone else will know a way around this other than "use different keys".
For windows people, you can produce really similar results by doing Windows Key + Z. You'll only get up event for Z and no down events.

Key.chord or ActionSequence?

I need to simulate pressing CTRL + C, CTRL + V, and so on. Selenium give us two way to do it:
webdriver.Key.chord(var_args), example:
webdriver.Key.chord(webdriver.Key.CONTROL, 'c')
and Class ActionSequence, example:
new webdriver.ActionSequence(driver).keyDown(webdriver.Key.CONTROL)
.sendKeys('с')
.keyUp(webdriver.Key.CONTROL);
action.perform();
Which way is better to use and why?

Firstly, webdriver.Key.chord doesn't send any events, it simply appends the arguments and adds a NULL on the end. According to the code:
Note: when the low-level webdriver key handlers see Keys.NULL, active
modifier keys (CTRL/ALT/SHIFT/etc) release via a keyup event.
So assuming you pass the resulting string to elem.sendKeys(), you'll end up with:
sendKeys: Ctrl-c
keyUp: Ctrl
By contrast, using the Actions API in your example, you would get:
explicit keyDown: Ctrl // *Not* released
sendKeys: c
explicit keyUp: Ctrl // Note original edit had 'keyDown'
Which should give exactly the same result.
I'm sure webdriver.Key.chord is a more natural way to express the use of modifier keys, without anyone needing to think about key downs or ups, and ease of use is paramount. Even if 'performance' was slightly different, the difference isn't worth thinking about.

how to handle non english key presses

When I switch my keyboard layout to hebrew and press a character, it is received in the kepress event as is. For example, clicking ה (the v key), then e.which is 1492. However, when I do a combination the key is the english key. So for alt+ה e.which is 86. So the event looks like alt+v
This is a pain if I want to create a function that accepts key combinations and callbacks and registers the callbacks but also shows a documentation of the callbacks, since if I register alt+ה, then when I press the combination it will look like alt+v and it wouldn't match the registered combinations. But if I register alt+v, then the documentation will be awkward.
So my question boils down to whether one of the following is possible:
knowing which key actually was pressed (meaning, knowing that ה was pressed together with alt and not v)
mapping between the hebrew characters (or any non-english) to their physical english counterparts, so when my function receives alt+ה it will convert it to alt+v for the callback lookup.
Of course I want something generic, that will work for any language, not list just the hebrew alphabet.

You should not care if it is alt-ה or alt-v, you want to perform the same operation on both cases.
If it is not identified, it is not identified anywhere, so your function will get alt-v as well.
if your function gets something ("Alt", "ה") you should create an object for conversion.
var conv= { 'ה': 'v'; 'ש': 'a',...}

Javascript Keyup isn't called when Command and another is pressed

This is Mac only problem; I've tried this on windows and it works fine.
I have a script that saves which keys are pressed on keydown and deletes them on keyup.
$(function(){
var keys = [];
$(document).keydown(function(event) {
keys[event.which] = true;
});
$(document).keyup(function(event) {
delete keys[event.which];
console.log(keys);
});
});
All I am doing right now is console logging whatever is left after the keyup, which should be nothing. This works as expected when you press any number of keys simultaneously.
HOWEVER, when you press command and any other key, the other key is NOT released! So console.log will show that key to be true. This will remain true until you press that key itself.
This only happens on a Mac, and it only happens when one of the keys pressed is the Command key. Here is a very simple plunker with the above example.
Any ideas?

The Mac is modifying your key whenever you press Command, and thus the normal keyup event never fires.
C = command key and K = non-command key
As you press C and K, they register normally. While they are both simultaneously pressed, the Mac captures K and modifies it. In modifying K, the Mac somehow makes K's keyup event not fire as it is supposed to. C's keyup works as expected, however.
Since K's keyup never actually fires, it won't correctly delete the matching element from keys. Later on when you press K without C, the keydown event overwrites the existing keydown in keys. And when K's keyup correctly fires, it works as expected.
In addition to all the normal keys used to input ASCII characters,
keyboards typically have many special purpose keys that do other
things. These do not necessarily generate the same events as normal
keys, and they show less consistency across browsers.
JavaScript Madness: Keyboard Events. Potentially helpful article for all key-related problems.

I can't fix this Mac issue, but here is my way of getting around it.
This answer will help you if you are trying to have keyboard-shortcut behavior, where the user presses CMD+S to do save, or something like that. This answer does not apply to people who may be building a game or something where their keyboard's keydown states need to be known at each run frame. Sorry!
In the KeyboardEvent returned by keydown, you can do the following
$(document).keydown(function(keyboardEvent) {
if (keyboardEvent.metaKey){
// on Mac, CMD is down ...or Meta key is down on pc
console.log(keyboardEvent.meta + " & command key are down")
switch (keyboardEvent.which) {
...
}
}
});
If your keyboard shortcut overlaps with the browser's, you need to make sure to cancel the propagation of the keyboard event,
keyboardEvent.preventDefault()
I hope this helps people who want keyboard shortcut functionality that is Mac compatible!

transform pressed key values to english values

I have an input like this
<input id="guestCard" name="guestCard" onkeypress="transform(event)" type="text" value="" />
and I want to transform the key pressed on a keyboard regardless of which language settings to english character. E.g. when I press on czech keyboard + (with keycode 43) , I want to get 1 (with keycode 49).
Is there some standard way to do this? How would the function transform look like?
Alternatively I want the same functionality but using ajax (on asp.net mvc). Any ideas there?
Thanks in advance.

As far as I am aware, JavaScript is not locale aware - so you would need to somehow detect or have the user pick the appropriate transform mapping (in this case, perhaps a radio button for czech as the source and U.S. ASCII as the destination). Once that is taken care of, your function could be something like:
function transform(event) {
var code = (event.charCode) ? event.charCode : event.keyCode; // cross-browser happy
switch (code) {
case 43 : return "1";
}
}
There is a great test page to see how keyCode/charCode properties and the onKeyDown/Press/Up events behave in different browsers. http://asquare.net/javascript/tests/KeyCode.html

I doubt there is one but to create it, create an associative array, add some JS to a text field which saves the two values in the array and then press every key on the keyboard. After that, you can dump the array somewhere and use this as a constant in your code.
But be warned: Almost all users will have problems when they don't get the character on the screen which they've typed on the keyboard.

Trimack -
I think you are using the wrong event. You need onkeydown, and use the keyCode property of event.