detect keyboard layout with javascript

Question

Is there any way to detect the current keyboard layout using JavaScript? I found this, but it only detects if the visitor is on the english layout. I need to know the exact layout as a string, e.g.de-ch, fr or en.

Answer 1

Keyboard layouts do not have standardized identifiers. They have names assigned to them by the layout creator. They may have a language association as one defined property.

The Keyboard layouts should not be confused with language or locale identifiers. In particular there is no single “English layout” but dozens of layouts that may be used for English.

I don’t think systems normally make their current layout settings readable via JavaScript.

So whatever problem you are trying solve by detecting the keyboard layout, a different approach is needed.

Answer 2

I know this question is old, but for those of you who have been stymied by the fact that some keys map to different characters in other locales, here is an approach you can use to deal with it.

Most likely, you have your keyboard event handler tied to a keyup or keydown event; the results of the event.which or event.keyCode property in this case is tied to which key the user pressed. For instance, the same key you use to type ';' in an EN layout is the key used to type 'ж' in an RU layout, and the event reports 186 as the code for both of them.

However, if you're more interested in the character that resulted from the key press, you should use the 'keypress' event instead. This event fires after keydown/up, and it reports the actual unicode codepoint of the character that was typed inside event.which or event.charCode, which in the example above is decimal 1078 or U+0436.

So, if you'd prefer not to guess at keyboard layouts and you don't need to differentiate between keyup/keydown, keypress may be a viable alternative for you. It's not perfect (most browsers don't consistently report keypress events on keys that don't print characters, like modifier keys, function keys and navigation keys), but it's better than guessing at keycodes when dealing with printable characters.

Answer 3

You are looking for is how to detect their Locale. In the HTTP headers this is stored in the Accept-Language header, but thats not available to the browser through pure JS.

There's a jQuery plugin called 'Browser Language' that might get you going on the right path.

Answer 4

All what I know about this topic and already implemented a solution for it, is to detect non English layout keyboard, i.e Languages that uses any alphabet other than that used in English. The solution is depend on regular expression to match any word character \w, any digit character \d and a range of predefined English keyboard special characters, so any other characters, such as Arabic, Japanese, etc, will not match, all this uses keydown event and I am using this solution to restrict and notify usernames and passwords fields entry in login form. I packaged it in a function like the following:

function checkKeyboard(ob,e){
        re = /\d|\w|[\.\$@\*\\\/\+\-\^\!\(\)\[\]\~\%\&\=\?\>\<\{\}\"\'\,\:\;\_]/g;
      a = e.key.match(re);
      if (a == null){
        alert('Error 2:\nNon English keyboard layout is detected!\nSet the keyboard layout to English and try to fill out the field again.');
        ob.val('');
        return false;
      }
      return true;
    } 

Then call the function from the event as the following:

$("#textFieldId").keydown(function(e){
        if (!checkKeyboard($(this),e)){
            return false;
        }
    });

This is Working DEMO for unknown down voters!