How do international keyboards work with Java keyboard events?

Question

I wrote a text editor in JavaScript that accesses the Canvas element directly (for various reasons, but my main reason is that I can hit this canvas on the WebGL grid as a texture). As a happy surprise, it was easier to implement all the editable solutions that I found.

One thing that I noticed at an early stage was complaints from people with keyboard layouts other than QWERTY English that some keys showed incorrect letters. After some conversation with the Windows language settings and the on-screen keyboard, I created a code page solution that directly matches keyCodes with character strings for different locales, and not just assumes that "keyCode 51 without modifier keys is number 3". Because it is not, on some keyboards it is double-qoute.

But there are still some oddities. A few examples (note that all these examples are based on using the Windows on-screen keyboard, so I assume this correlates with reality):

• The French AZERTY keyboard dispatches keyDown and keyPressed events when the letter U is entered, but keyUp is never used. I assume that U needs to be combined with another key, but not knowing what the correct behavior should be, it prevents me from writing the correct code. EDIT: I still do not quite understand what this means, except - perhaps - this key is used in just one word the whole French language?
• The German QWERTZ keyboard has a ^ (it’s not a carriage, it looks bigger), where the `(backtick) key will be on the US keyboard and the callback key, where the = (equal) key will be on the US keyboard. In both cases, they dispatch keyDown and keyUp events, but don't print anything in any text editor that I use until they hit a second time, and then two characters print. Does this have something to do with label merging? I can’t find anything. EDIT: They are called dead keys , and they create letters with an accent. They have many keyboard layouts. I will create a key sequencing system for this, which will also help provide more complex Emacs-style keyboard shortcuts, if selected.
• The UK QWERTY keyboard has a backslash that requires the use of the ALT-GRAPH key (Right-Alt key on US keyboards). There is a location property KeyboardEvent that can be used to determine which of the ALT keys is pressed, but this is apparently not available in Safari. This is a pretty low priority since Safari usually only accounts for 1% or less of my traffic. However, is there a property that works for Safari that I can use as a backup? EDIT: I will handle this as the rest of my code page works for the differences between the low and high keys, This is just another code page for the new modifier key. I will need to change the way modifier keys are detected, but this is a minor change and will be very easy to fit into the keyboard.
• Finally, judging by the language settings of Windows, there are many different keyboard layouts in the world. Is there a list of key codes and behavior anywhere? I would not manually check each keyboard to create a new code page for them.

The first two problems are the biggest. I can find a solution for them if I just know what the behavior should be. The third question will fit into my code page system, although I will have to change the way modifier keys are read. The last question, maybe I could pay someone.

And I'm fine, unable to solve it for all users in all browsers in 100% of cases. But most of the information I came across is mostly "not worried", which really only sounds more like "I don't know."

EDIT: Layout selection is not a concern. I provide it as an option for the user if something does not work for them. I think the best thing that can be done in this situation, but obviously, I would automatically detect if I could do this. I really only care about the correct behavior, given that the correct layout is already selected.

I would like to avoid everything related to the keyPress event, given that it is not completely reliable. If I had a reliable source of data about keyboard layouts, this is not a problem.

Answer 1

You cannot get a keyboard layout ...

There is no way (with a pure JS solution) to detect a user’s keyboard layout.

Please note that "en-US" or "en-GB" does not match any specific / consistent keyboard layout for these languages. The user's language does not depend on how their keys are mapped to a character.

You can make assumptions based on their language / language code , but this does not give any guarantee - it simply increases the likelihood that you are eating the appropriate layout.

Also see the following questions:

Convert Javascript keyCode to charCode for keyboard layout other than US ( )

Detecting keyboard layout using javascript

... but you can get the entered character:

However, depending on your required browser support (which uses the canvas, it should be nice), you can try using the charCode property:

http://www.w3schools.com/jsref/event_key_charcode.asp

 var unicodeCharCode = e.charCode; 

Please note that this will not return the actual character - you will get a number representing it (NOT a key):

The Unicode character code is the character number (for example, the number "97" denotes the letter "a").

You can easily match these codes with characters as needed, or simply use the built-in function:

 var userInput = String.fromCharCode(unicodeCharCode); 

• To be smart / do the work for yourself, you could (quite trivially) write a library to guess the keyboard layout from the charCode returned for a particular keyCode. Not worth it :)

---

Alternative approach:

One suggestion for using as a workaround would be to use a hidden (or at least discrete) text input / text field that your application focuses on.

When your application detects a keystroke / keydown, etc., you can capture the value entered by the user and display it on your canvas.

Since you are already dealing with keyboard events, handling combinations should be easy (if necessary). In some cases, even this is not required, since you only need to monitor the input length of the user input (your application does not need to worry about whether the user needs to use a combination of three keys to enter a character, you just capture the result).