5

I basically want to know what the system's input language is currently on (for users who have multiple language input methods set up). This will determine whether if the text-direction of a <textarea> should be rtl or not.

Please keep in mind that this setting can change after the page is loaded.

Is there a simple way of doing it in JavaScript/jQuery?

Tarek Fadel
  • 1,909
  • 1
  • 14
  • 22
  • 2
    Possible duplicate of http://stackoverflow.com/questions/1043339/javascript-for-detecting-browser-language-preference – Dagg Nabbit Mar 01 '12 at 15:11
  • Check `keycode` in `onkeyup` event or char codes in `textinput` event and compare it to some char range. There's no way to get system input language (or keyboard layout) directly – kirilloid Mar 01 '12 at 15:32
  • @kirilloid can you please turn that comment into an answer so I can accept it. – Tarek Fadel Mar 26 '12 at 13:30

4 Answers4

6

There is no way for the browser to tell what the current keyboard layout (input language) is. As @kirilloid mentioned, one possible workaround is to check the keycode on keyup and determine the language from that.

Tarek Fadel
  • 1,909
  • 1
  • 14
  • 22
4

Javascript has no access to the Accept-Language HTTP header which is the way the browser transfers this information to the server.

This means that you'll have to use server-side scripting in some way or another and send the Accept-Language value as a javascript variable.

If you want to check it dynamically you might do an ajax call to a server side script which simply returns the Accept-Language header from the ajax request. That way you will probably catch those who change their language settings after loading the page.

Janek
  • 2,942
  • 1
  • 14
  • 14
  • 1
    An interesting approach. However, for me `$_SERVER['HTTP_ACCEPT_LANGUAGE']` always returns `en-US,en;q=0.8,ar;q=0.6`regardless of which input language is active at the time so there is now way to tell based on that data which language is currently active. – Tarek Fadel Mar 04 '12 at 13:13
  • I just did a quick check with phpinfo(), and it seems to work for me. My default setting (swedish as primary language) displays HTTP_ACCEPT_LANGUAGE sv-se,sv;q=0.8,en-us;q=0.5,en;q=0.3 Then I added afrikaans to the top in my Firefox settings: HTTP_ACCEPT_LANGUAGE af,sv-se;q=0.8,sv;q=0.6,en-us;q=0.4,en;q=0.2 – Janek Mar 05 '12 at 14:07
  • Right, but if you just switch your input language (default key combination Left-Alt + Left-Shift) the `HTTP_ACCEPT_LANGUAGE` string remains the same. The input language setting that changes with the aforementioned key combination is that I am looking to figure out/capture. – Tarek Fadel Mar 06 '12 at 08:13
  • Ah, sorry about that. I can't imagine a way to capture that information, I'm afraid. – Janek Mar 06 '12 at 08:51
0

I came across this situation, so I wrote a little jQuery plugin for that:

$.fn.checkDirection = function() {
    var dir = checkRTL(this.val()[0]) ? 'RTL' : 'LTR';
    this.css("direction", dir);

    function checkRTL(s) {
        var ltrChars = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF' + '\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF',
        rtlChars = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC',
        rtlDirCheck = new RegExp('^[^' + ltrChars + ']*[' + rtlChars + ']');
        return rtlDirCheck.test(s);
    }
};

Basically, as soon as the user starts typing, it will check the language's direction, and set the selector's direction accordingly. The usage will be as:

$('textarea').on('input', function(){
    $(this).checkDirection();
});
Hazem_M
  • 549
  • 5
  • 11
0

Maybe a solution would be to have a map between keycode(place user pressed on keyboard) and actual letters/characters/symbols written or their actual UTF-16 code points

different keyboards sometimes write out different characters even if they are positioned on the same place on a keyboard(marked by a keycode). So, for example, same key(keycode) on the keyboard could be mapped to these symbols/characters/letters.

Ç - in Spain

ú - in Italy

# - in Germany

µ - in Belgian

Here is a sample code that does not use any mapping to determine what language it could be. But its a start, since it checks keycode, actual character/letter/symbol or glyph, and its UTF-16 code point in integer. Also, as far as I can see, none of the methods and properties are marked as deprecated as far as I could see on MDN, as opposed to which, charCode and keyCode, that are used on some examples out there.

var keyCode;
var character;
var utfCodePointInDecimal
function checkCodes(event) {
    var that = event
    checkKeyCode(that);
    checkChar(that);
    charUTFPoint();
    console.log("keycode/location on keyboard: " + keyCode);
    console.log("character: " + character);
    console.log("utf code point: " + utfCodePointInDecimal)
}

function checkKeyCode(e) {
    keyCode = e.code;
}

function checkChar(e) {
    character = e.key;
}

function charUTFPoint() {
    utfCodePointInDecimal = Number(character.codePointAt(0));
}

window.onkeydown = checkCodes;

here is a link to a UTF-16 list of characters. (note, code points are in hex)

http://www.fileformat.info/info/charset/UTF-16/list.htm

And here is a site I found with different mappings per language. It is in C lang I belive, but you can probably use it as a template and the write own mapping in JavaScript

https://beta.docs.qmk.fm/using-qmk/simple-keycodes/reference_keymap_extras

brat
  • 586
  • 5
  • 17