Alam Arabic and English bilingual inputs jQuery plugin

If your form has English and Arabic mixed inputs in a sequance, it hurts data entry operaters to switch language for each input.

With this soultion they do not need to switch between languages for English and Arabic inputs, even they do not need to install both the language

Try typing in all below inputs without changing your system input language

You can also temporarly disable it (by clicking on it) if you have mixed English and Arabic string to input

Downlad from Github

Developer Documentation

  1. Make inputs and wrap each input in a div with any class forexample form-group
  2. Also provide a specific class to those inputs which you want to force English/Arabic txtLang
  3. Also add a data attribute to these inputs specifying language of input, either en or ar eg data-lang="ar"
    Or you can specify targetLang:'ar' when applying plugin to inputs in jQuery
  4. Add alam-bilang-input.css, jquery.js and alam-bilang-input.js to your page
  5. Apply plugin to your specified inputs eg. $('.txtLang').alamBiLangInput();
Code in head tag 
    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <!--Required CSS File-->
    <link rel="stylesheet" href="css/alam-bilang-input.css" type="text/css" />

    <!--Required JS File-->
    <script src="js/jquery-3.4.1.min.js"></script>        
    <script src="js/alam-bilang-input.js"></script>

    <!--Apply plugin to all those inputs who has class="txtLang" -->
    <!--it will force it English or Arabic what ever specified as data-lang attribute in each input -->
    <script>
        $(function(){
            $('.txtLang').alamBiLangInput({
                targetLang:'ar' //default is ar, it will be overidden if data attribute is provided
            });
        });
    </script>
Code in body tag 
<div class="container">
    <div class="row"> 
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="form-group">
                <label class="mb-0" for="txtNameEn">Name in English</label>
                <input type="text" id="txtNameEn" class="form-control txtLang" data-lang="en" value="Fakhre Alam" />
            </div> 
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="form-group">
                <label class="mb-0" for="txtNameAr">Name in English</label>
                <input type="text" id="txtNameAr" class="form-control txtLang" data-lang="ar" value="فخر عا لم" />
            </div>
        </div>


        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="form-group">
                <label class="mb-0" for="txtDepartmentEn">Department in English</label>
                <input type="text" id="txtDepartmentEn" class="form-control txtLang" data-lang="en" />
            </div>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="form-group">
                <label class="mb-0" for="txtDepartmentAr">Department in English</label>
                <input type="text" id="txtDepartmentAr" class="form-control txtLang" data-lang="ar" />
            </div>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="form-group">
                <label class="mb-0" for="txtEmailEn">Email in English</label>
                <input type="text" id="txtEmailEn" class="form-control txtLang" data-lang="en" />
            </div>
        </div>


        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="form-group">
                <label class="mb-0" for="txtMobile">Mobile</label>
                <input type="text" id="txtMobile" class="form-control" />
            </div>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="form-group">
                <label class="mb-0" for="txtOther">Other</label>
                <input type="text" id="txtOther" class="form-control" />
            </div>
        </div> 
    </div>
</div>