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>
