Keyboard shortcuts for non-English keyboard layouts

[Venky]

Hey community,

I am working on a project where I want to introduce a keyboard shortcut for a particular action.

private void shortcutKeyHandler() {
    Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
        @Override
        public void onPreviewNativeEvent(Event.NativePreviewEvent event) {
          NativeEvent nativeEvent = event.getNativeEvent();
          if (event.getTypeInt() == Event.ONKEYDOWN && nativeEvent.getAltKey() && nativeEvent.getKeyCode() == 191 && !db.isShowing()) {
            nativeEvent.preventDefault();
            execute();
          }
        }
      });
    }

In the code, I implemented a shortcut (Alt + /) to display a dialog box. While it works well with English keyboard layouts, the problem arises with other layouts where the Slash key (keycode 191) generates a different keycode.

Is there some workaround with the help of JSNI?

I would greatly appreciate any help in determining how to check the character code and verify if the Alt key is pressed.

Thanks in advance 

[Jens]

Usually you want to use the "key" property of the event as it is independent of the physical location of the key. It contains the printable character if the keyboard key produces one. If it doesn't it contains a description like "shift".

Depending on how international you have to be, you might also want to think about keyboards that have two layouts: one with latin characters and one with non-latin characters (arabic, ..). These keyboards usually have a key to switch between both layouts and the layout with latin characters usually matches the standard English keyboard layout, but it doesn't have to. If you don't want to force your users to switch to latin mode before using a keyboard shortcut you would need to detect if the "key" property contains a non-latin character and if it does you should check "code" instead of "key" property. You would use the "code" of the English layout, assuming that the chance is high that the latin layout is indeed the standard English layout.

If you only support Chromium based browsers you can use the Keyboard API: https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API

-- J.

[Craig Mitchell]

You could try a lower level, grabbing the key down and key up events.  Something like this:

RootPanel.get().addDomHandler(event -> {
handleKeyEvent(event.getNativeKeyCode(), true);
event.preventDefault();
event.stopPropagation();
}, KeyDownEvent.getType());

RootPanel.get().addDomHandler(event -> {
handleKeyEvent(event.getNativeKeyCode(), false);
event.preventDefault();
event.stopPropagation();
}, KeyUpEvent.getType());

private void handleKeyEvent(int keyCode, boolean isDown) {

if (keyCode == KeyCodes.KEY_ALT) {

altKeyDown = isDown;

[Venky]

Thanks for the reply Jens,

The issue that I am facing is with the '/', whose keycode is 191 in the standard keyboard layout and it is different in other keyboard layouts like the Latin American keyboard layout where the keycode for '/' is not 191. The keycode for the Alt key is same in almost all the keyboard layouts, so that is not the problem.
To check if the slash key is pressed along with the alt key I want to compare event.getNativeEvent().getCharCode() == '/' so that this is consistent in all keyboard layouts, but the issue is how do I check for this along with event.getNativeEvent().getAltKey() to know if both Alt + / are being pressed together.
The getCharCode() can be used only if there is a KeyPressEvent and getAltKeyCode() with KeyDownEvent or KeyUpEvent if I am not wrong, So how do I use them together.

[Thomas Broyer]

Have a look at https://unixpapa.com/js/testkey.html (and the accompanying blog post). Even though 12 years old, things haven't changed in browsers (fewer discrepancies, but no change in specs at least)

IIRC, nowadays you'd want to use keydown and keyup for that kind of keyboard shortcuts, and input otherwise (as a replacement for keypress)

You may also want to have a look at JS libraries dedicated to keyboard shortcuts (I don't know of any as I don't have that need) to see how they work.

[Jens]

The "charCode" property of keyboard events is deprecated for exactly the reason you mentioned. Instead you should use the "key" property which is available in keyup and keydown events and contains the character or a description of the key being pressed. GWT SDK does not have a Java API to access the "key" property so you have to either write your own helper method using JSNI (pass in the native event and return they key property) or use elemental2 + JsInterop base library to cast GWTs NativeEvent into the elemental2 keyup/keydown event so you can access the "key" property without JSNI.

However ALT + / is still a bad shortcut for non-english people. I am German and similar to Latin American keyboards character "/" is on the key "7" and we have to press SHIFT + 7 to get a "/". So if your app uses shortcut ALT + / and checks for ALT and for character "/" we actually have to press ALT + (SHIFT + 7 = /). However on my German keyboard layout using macOS that exact shortcut renders a backslash "\". So in your code you would see that ALT is being pressed but the character (charCode/key property) is "\" instead of "/" and the shortcut would not be accepted. Even libraries for JS shortcuts like Mousetrap or hotkeys-js have trouble to detect ALT + / on this keyboard layout on macOS.

Your safest bet are CTRL / ALT + letters for shortcuts on the web. Especially if users cannot customize shortcuts in your application you should provide letter based shortcut alternatives if you want to stick to common english shortcuts. So ALT+/ and ALT+s for accessing search for example.

-- J.

[Venky]

Thank you everyone for the help 😊