CODEWITHSUNDEEP
javascriptjqueryhtml
Tarek Fadel
Tarek Fadel

Reputation: 1959

Is there a way to detect what the input language setting is currently?

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?

Upvotes: 7

Views: 5092

Answers (4)

brat
brat

Reputation: 584

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

Upvotes: 0

Hazem_M
Hazem_M

Reputation: 589

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();
});

Upvotes: 0

Tarek Fadel
Tarek Fadel

Reputation: 1959

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.

Upvotes: 7

Janek
Janek

Reputation: 3242

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.

Upvotes: 4

Related Questions