CODEWITHSUNDEEP
javascriptkeyboard-layout
Parzifal
Parzifal

Reputation: 1076

detect keyboard layout with javascript

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.

Upvotes: 24

Views: 41815

Answers (8)

YumiBakura
YumiBakura

Reputation: 45

I used the Chrome I18N API in the past, it works in some cases.

More specifically, by using detectLanguage() you can get a reliable result.

The following code detects up to 3 languages from the given string and displays the result as strings separated by new lines.

function detectLanguage(inputText) {
  chrome.i18n.detectLanguage(inputText, function(result) {
    var outputLang = "Detected Language: ";
    var outputPercent = "Language Percentage: ";
    for(i = 0; i < result.languages.length; i++) {
      outputLang += result.languages[i].language + " ";
      outputPercent +=result.languages[i].percentage + " ";
    }
    document.getElementById("languageSpan").innerHTML = outputLang + "\n" + outputPercent + "\nReliable: " + result.isReliable;
  });

Upvotes: 1

Gilles Qu&#233;not
Gilles Qu&#233;not

Reputation: 184955

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')))

Upvotes: 0

Lodz
Lodz

Reputation: 990

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.

Upvotes: 7

Luc
Luc

Reputation: 843

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

Upvotes: 1

SaidbakR
SaidbakR

Reputation: 13534

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

Upvotes: 4

Nathaniel
Nathaniel

Reputation: 1382

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.

Upvotes: 17

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201508

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.

Upvotes: 12

synthesizerpatel
synthesizerpatel

Reputation: 28036

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.

Upvotes: 1

Related Questions