JS keydown + keypress + preventDefault

Question

What we have:

keydown event + preventDefault prevents keypress event (proof: https://stackoverflow.com/a/57401334/9398364)
stopPropagation doesn't help at all
We can't simulate keypress with dispatchEvent because we don't know full list of unprintable event.key values (which we can't just throw as unicode value using event.key.codePointAt(0))

What we need:

Disable default browser keys reaction (i.e. tab press in chrome) without huge switch expression
Detect keydown events because we need shift, ctrl and other keys events (event.code matters)
Detect keypress events because we need to input unicode characters (event.key matters) without input event and without checking if it is unprintable character (such as shift and ctrl)

How?

UPD: Seems like non-unicode event.key has >1 length (source: https://stackoverflow.com/a/70401792/9398364) Is there any proof?

Maybe test that keydown is a useful key for your application using a regex (ex: `/\w|\d|ctrl|shift/`), else `preventDefault()` ? — Jean Will, Dec 25 '21 at 17:32
@JeanWill that's too dirty and slow solution even if it works. I need all the keys ever existed — caxapexac, Dec 25 '21 at 17:36

score 0 · Accepted Answer · answered Dec 25 '21 at 17:35

Solved like this:

    window.addEventListener('keydown', function (event)
        {
            onKeyboard(event.code);
            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey)
            {
                const utf16Code = event.key.codePointAt(0);
                onKeyboardInput(utf16Code);
            }
            event.preventDefault();
        }, false);

JS keydown + keypress + preventDefault

1 Answers1