在HTML输入中写非英文数字 [英] Write non English numbers in HTML input

问题描述

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

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

解决方案

我创建了一个使用numberingsystems.json的js，您可以在此处找到 http://ziyad.info/zh-CN/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;如果(状态=== 200){callback(null，xhr.response);} 别的 {callback(status，xhr.response);}};xhr.send();};函数SetNumSystem(inputControlId，culture){//来自cldr-core的文件//参见:https://github.com/unicode-cldr/cldr-core/blob/master/supplemental/numberingSystems.jsongetJSON('https://raw.githubusercontent.com/unicode-cldr/cldr-core/master/supplemental/numberingSystems.json'，函数(错误，数据){if(err！== null){alert('出事了:'+ err);} 别的 {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)+数字列表[event.key] + s.substr(inputControl.selectionEnd);inputControl.value = s;inputControl.selectionStart = inputControl.selectionEnd = i + 1;返回false；}}， 错误的);}});}  

 < script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>< label>阿拉伯</label>< input type ="text" id ="arab"/>< br/><标签> Farsi</标签><输入type ="text" id ="farsi"/>< br/>< label> Beng</label><输入type ="text" id ="beng"/>< br/>< label> knda</label><输入type ="text" id ="knda"/>< br/>< label> Deva</label><输入type ="text" id ="deva"/>< br/>< script>$(function(){SetNumSystem("arab"，"arab");SetNumSystem("farsi"，"arabext");SetNumSystem("beng"，"beng");SetNumSystem("knda"，"knda");SetNumSystem("deva"，"deva");});</script>  

I have a ASP .Net core web application and i am using Devextreme controls. My application should support Persian and Arabic languages including numbers and dates. I have my local windows keyboard with Persian language and when i type in notepad for instance it shows Persian numbers but when i write in my web application or any web page like google for example it only shows English numbers. I tried setting the lang attribute in the html tag to "fa" and didn't work. How i can use Persian or Arabic numbers in HTML input ?

Note: There is not a problem with Devextreme or asp .net core because any simple HTML input shows only English numbers My question might be silly but i searched a lot and didn't find a solution.

解决方案

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>

这篇关于在HTML输入中写非英文数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！