mousetrap icon indicating copy to clipboard operation
mousetrap copied to clipboard

.bind with KeyboardEvent.code

Open thomas-daniels opened this issue 4 years ago • 1 comments

At the moment, it seems that .bind only works with strings, being able to bind from KeyboardEvent.code would be nice too (with probably a fallback for Edge and IE).

The use case is consistency between different keyboard layouts, where the .key property is different but .code is the same because .code is linked to the physicial key rather than its character.

A concrete example of this, let's say you want to bind keys from the top keyboard row. You could do Mousetrap.bind('1', function() { ... }); and it will work for pretty much all keyboard layouts... except AZERTY, the most common keyboard layout in Belgium and France. While the numbers are on the top row there too, you have to press Shift to get them. The current best workaround is to bind the &, é etc. keys too (i.e. the top row keys on AZERTY) but this adds excess keyboard shortcuts for all users. Being able to use the codes Digit1, Digit2 etc. would make it way more clean.

thomas-daniels avatar Jul 07 '19 18:07 thomas-daniels

There is another example. I bind an action to key 'X' and it works fine only for the latin keyboard. Another keyboard system (in my key it's Russian) doesn't work. I would add the appropriate character 'Ч' but I'd like to support any system (my app is international). In that case 'code' could help me if I set 'KeyX'.

oops-wrong avatar Sep 17 '21 07:09 oops-wrong