Write non English numbers in HTML input

user_591388 0
Viewed 1335

I have a ASP .Net core web application and i am using Devextreme controls. My application should support Persian and Arabic languages including numbers and dates. I have my local windows keyboard with Persian language and when i type in notepad for instance it shows Persian numbers but when i write in my web application or any web page like google for example it only shows English numbers. I tried setting the lang attribute in the html tag to "fa" and didn't work. How i can use Persian or Arabic numbers in HTML input ?

Note: There is not a problem with Devextreme or asp .net core because any simple HTML input shows only English numbers My question might be silly but i searched a lot and didn't find a solution.

asp.net-core lang input asp.net html
3 Answers

I created a js that uses numbersingsystems.json which you can find here https://github.com/unicode-cldr/cldr-core/blob/master/supplemental/numberingSystems.json

it reads the numbering systems and uses the selected culture to replace the input key code, see full sample with different cultures below.

notice that changing the numbering system requires you to properly setup the localization for backend and client side validation as well, otherwise a validation error will rise for numeric inputs because the default numbering system for validation is latin (0123456789),

you may see full article re localization and setting numbering system and client side validation here: http://ziyad.info/en/articles/10-Developing_Multicultural_Web_Application

var getJSON = function (url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function () {
        var status = xhr.status;
        if (status === 200) {
            callback(null, xhr.response);
        } else {
            callback(status, xhr.response);
        }
    };
    xhr.send();
};

function SetNumSystem(inputControlId, culture) {
    // file from cldr-core
    // see: https://github.com/unicode-cldr/cldr-core/blob/master/supplemental/numberingSystems.json
    getJSON('https://raw.githubusercontent.com/unicode-cldr/cldr-core/master/supplemental/numberingSystems.json',
        function (err, data) {
            if (err !== null) {
                alert('Something went wrong: ' + err);
            } else {
                var inputControl = document.getElementById(inputControlId);

                inputControl.addEventListener("keydown", function (event) {
                    if (event.key >= 0 && event.key <= 9) {
                        var numbersList = data.supplemental.numberingSystems[culture]._digits;
                        event.preventDefault();
                        var s = inputControl.value;
                        var i = inputControl.selectionStart;
                        s = s.substr(0, i) + numbersList[event.key] + s.substr(inputControl.selectionEnd);
                        inputControl.value = s;
                        inputControl.selectionStart = inputControl.selectionEnd = i + 1;
                        return false;
                    }
                }, false);
            }
        });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Arab</label>
<input type="text" id="arab" /><br />

<label>Farsi</label>
<input type="text" id="farsi" /><br />

<label>Beng</label>
<input type="text" id="beng" /><br />

<label>knda</label>
<input type="text" id="knda" /><br />

<label>Deva</label>
<input type="text" id="deva" /><br />

<script>
$(function(){
  SetNumSystem("arab", "arab");
  SetNumSystem("farsi", "arabext");
  SetNumSystem("beng", "beng");
  SetNumSystem("knda", "knda");
  SetNumSystem("deva", "deva");
  });
</script>

user_55190260

Have a look at Persian.js Then, you would do a javascript function that gets triggered every time an english number is typed, so, it would be something like:

$("#my_input").keyup(function() {
    $("#my_input").val() = persianJs($("#my_input").val()).englishNumber();
});
user_65052850

If you only want to show Persian/Arabic numbers to users, Try using a Persian font like BKoodak for your inputs so the numbers will be displayed correctly.

<input type="text" style="font-family: BKoodak">
user_66613140
Related