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.

Antivenin

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.

Recept

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.

Tailspin

"and the event reports 186 as the code for both of them." I think this is false. Try this fiddle jsfiddle.net/BWPaz and try switching between different keyboard locales. I'm personally getting different codes on an English US locale as on a French locale. – Diestock

@JackM I am getting the same key codes for different Russian and English symbols that are located on the same key. Chrome, Windows 8.1. – Milligan

Answer 3

You can now use the Keyboard object returned by the Navigator interface. This object provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.

See https://developer.mozilla.org/en-US/docs/Web/API/Keyboard

At this moment this feature is experimental and working only on some major browsers.

Echoechoic

I test it and it return just English letters in my case. Im not sure way. I changed to HEB run the function and it return English keys map – Alopecia

At the moment it only works for some keyboard layouts – Purington

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!

Notice:

In the regex pattern, re you are able to add any missing special characters such as #,`,|, etc

Roorback

@itzjackyscode because it is, mainly, designed for passwords and user names. – Roorback

You are able to add to add \s to the pattern to include spaces. – Roorback

Answer 5

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.

Ascarid

Accept-Language, browser languages (this has several meaninigs), and keyboard layout are all different things. You can at most guess the keyboard language from the others, and you will often guess wrong. – Recept

Thanks for your answer! This would work for most visitors, but some have a different keyboard layout than accept language. For instance, my header is Accept-Language: de,en;q=0.7,en-us;q=0.3 although my keyboard is set to de-ch (special chars are different to normal de-de). Is there no direct way to get the layout? – Antivenin

There's no way to get the layout, you can only guess based on the language. Yes, in the case where it's Querty vs. Divorak or Chinese traditional vs. Chinese simplified - you probably can't determine it. On second thought.. I realize, it may be possible to detect but .. it'd be spotty. You'd basically have to wait for the user to type something and then examine the key codes. – Ascarid

okay thanks a lot. maybe I'll let the user choose it for himself then. or do you know if it is possible to determine it in Java? I want to give the keyboard layout to a java applet with a param, but maybe I could rewrite the applet. – Antivenin

Answer 6

you can use event.code to determine the actual keyposition from any layout, try it http://keycode.info/

Legator

Answer 7

Nowadays, this is used in fingerprinting techniques.

firefox don't expose this, but chromium based browser, yes. (edge, brave, chrome, chromium, opera...)

navigator.keyboard.getLayoutMap()
.then(k => console.log(k.get('KeyQ') + k.get('KeyW') + k.get('KeyE') + k.get('KeyR') + k.get('KeyT') + k.get('KeyY'))) 

Swap