Пишите не английские цифры в HTML - PullRequest
Новая
       52

Пишите не английские цифры в HTML

0 голосов
/ 21 декабря 2018

У меня есть основное веб-приложение ASP .Net, и я использую элементы управления Devextreme.Мое приложение должно поддерживать персидский и арабский языки, включая цифры и даты.У меня есть локальная клавиатура Windows с персидским языком, и когда я набираю в блокноте, например, он показывает персидские цифры, но когда я пишу в своем веб-приложении или на любой веб-странице, например, в Google, он показывает только английские цифры.Я попытался установить атрибут lang в теге html на «fa» и не сработал.Как я могу использовать персидские или арабские цифры при вводе HTML?

Примечание. С ядром Devextreme или asp .net проблем не возникает, поскольку при любом простом вводе HTML отображаются только английские цифры. Мой вопрос может быть глупым, но я искалмного и не нашел решения.

Ответы [ 3 ]

0 голосов
/ 22 декабря 2018

Если вы просто хотите показать персидские / арабские цифры для пользователей, попробуйте использовать персидский шрифт, например, BKoodak для ввода, чтобы цифры отображалисьправильно: 

<input type="text" style="font-family: BKoodak">
0 голосов
/ 22 декабря 2018

Я создал js-файл, который использует numbersingsystems.json, который вы можете найти здесь 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>
0 голосов
/ 21 декабря 2018

Взгляните на Persian.js Затем вы должны выполнить функцию javascript, которая запускается каждый раз, когда набирается английский номер, поэтому это будет что-то вроде: 

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