While developing multilangual web application where you need quick data entry, It hurts data entry operators to switch system input language for each input.

Here in this blog we will learn how can we implement Arabic English bilingual inputs jquery plugin in or web application so that users do not need to switch the system input language for each input, instead it will automatically get specified language.

For example if we have specified name_en input to get name in english and user has selected Arabic as his/her system input language, but when he types in this input it will be written in English, and versa for Arabic input. 

It is very easy to aply it to your website form inputs, just few steps

Step 1: Download

Download plugin files from this link, it has js and css files, extract to your css and js folders.

Step 2: Add Libraries

add this code in your web page head section

Step 3: Form inputs

We have to add 2 attributes to our form inputs these are class=”txtLang” and language of that input data-lang=”en” it must be en or ar

Below is sample html code with above 2 attributes with first 5 inputs

Step 4: Apply plugin

Apply plugin to all inputs having class is equal to txtLang as shown in below code, this can be writen in head section or in body of html file. targetLangis optional, if you are providing here it means it will make all inputs as arabic, while if you are providing data-lang attribute in each input then it will take that for that specific input, so data-lang attribute is specific for each input.

Technically on each keyup it is looping through all characters and converting to specified language key character. if it is Arabic input even you write English it will be converted to English

Similarly if it is English input and you are typing Arabic it will be automatically converted to English, while if you need to enter mix of both languages then you have to click on blue box on top of input to temporarly disable it. 

Hope it was easy, will appraciate your constrcutive feedback and comments.