html - 在 HTML 输入中写入非英文数字

Question

我有一个 ASP .Net 核心 web 应用程序，我正在使用 Devextreme 控件。
我的应用程序应该支持波斯语和阿拉伯语，包括数字和日期。
我有波斯语的本地 Windows 键盘，例如，当我在记事本中输入时，它会显示波斯数字，但是当我在我的网络应用程序或任何网页(例如谷歌)中书写时，它只显示英文数字。
我尝试将 html 标签中的 lang 属性设置为“fa”，但没有奏效。
我如何在 HTML 输入中使用波斯或阿拉伯数字？

注意:Devextreme 或 asp .net core 没有问题，因为任何简单的 HTML 输入都只显示英文数字
我的问题可能很愚蠢，但我搜索了很多，但没有找到解决方案。

Answer 1

我创建了一个使用 numbersingsystems.json 的 js，你可以在这里找到 https://github.com/unicode-cldr/cldr-core/blob/master/supplemental/numberingSystems.json

它读取编号系统并使用选定的文化来替换输入的键代码，请参阅下面具有不同文化的完整示例。

请注意，更改编号系统还需要您正确设置后端和客户端验证的本地化，否则数字输入的验证错误会增加，因为验证的默认编号系统是拉丁语 (0123456789)，

你可以在这里看到完整的文章重新本地化和设置编号系统和客户端验证: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>