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

Write non English numbers in HTML input

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

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

看看Persian.js 然后,你会做一个 javascript 函数,每次输入英文数字时都会触发它,所以,它会是这样的:

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

如果您只想向用户显示 Persian/Arabic 数字,请尝试在您的输入中使用 BKoodak 这样的波斯字体,以便显示数字正确。

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

我创建了一个使用 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>