在HTML输入中写非英语数字

时间:2018-12-21 20:13:59

标签: html asp.net asp.net-core input lang

我有一个ASP .Net核心Web应用程序,并且正在使用Devextreme控件。 我的应用程序应支持波斯语和阿拉伯语,包括数字和日期。 我有使用波斯语的本地Windows键盘,例如,当我在记事本中键入时,它显示波斯数字,但是当我在Web应用程序或任何类似google的网页中书写时,它仅显示英文数字。 我尝试将html标记中的lang属性设置为“ fa”,但无法正常工作。 我如何在HTML输入中使用波斯或阿拉伯数字?

注意:Devextreme或asp .net核心没有问题,因为任何简单的HTML输入仅显示英文数字 我的问题可能很愚蠢,但我进行了很多搜索却没有找到解决方法。

3 个答案:

答案 0 :(得分:1)

看看Persian.js 然后,您将执行一个javascript函数,每次键入英文数字时都会触发该javascript函数,因此它类似于:

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

答案 1 :(得分:1)

如果您只想向用户显示波斯/阿拉伯数字,请尝试使用BKoodak之类的波斯字体作为输入内容,以便数字能够正确显示:

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

答案 2 :(得分:1)

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