在HTML5数字输入客户端中强制使用小数点代替逗号

问题描述

| 我已经看到一些浏览器将数字的“ 0”符号本地化。 所以现在，在我的应用程序显示经度和纬度坐标的字段中，我得到了类似“ 51,983 \”的内容，应该是“ 51.982559”。我的解决方法是改用

input type=\"text\"

，但我想使用正确显示小数的数字输入。 有没有一种方法可以强制浏览器在数字输入中使用小数点，而不管客户端本地设置如何？ （不用说，在我的应用程序中无论如何我还是要在服务器端对此进行更正，但是在我的设置中，我还需要在客户端进行校正（因为有一些JavaScript））。 提前致谢。 更新 截至目前，在Windows 7上检查Chrome版本28.0.1500.71 m，输入的数字仅不接受以逗号格式的小数。带有“ 2”属性的建议建议似乎无效。 http://jsfiddle.net/AsJsj/     

解决方法

        当前，Firefox使用输入所驻留的HTML元素的语言。例如，在Firefox中尝试使用此小提琴： http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/ 您会看到数字是阿拉伯语，逗号用作小数点分隔符，阿拉伯语就是这种情况。这是因为

BODY

标记具有属性

lang=\"ar-EG\"

。 接下来，尝试以下方法： http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/ 由于输入被包裹在具有属性

lang=\"en-US\"

的ѭ5中，因此该点用小数点分隔符显示。 因此，您可以采用的解决方案是使用设置为使用以点作为小数点分隔符的区域性的容器元素包装数字输入。     ,        通过将step属性指定为所需的小数位数精度，您的html5数字输入将接受小数。例如。取类似10.56的值；我的意思是2位小数，执行此操作：

<input type=\"number\" step=\"0.01\" min=\"0\" lang=\"en\" value=\"1.99\">

您可以进一步为最大允许值指定max属性。 编辑 将lang属性添加到具有区域设置值的输入元素，该区域设置值使用小数点而不是逗号来格式化小数     ,        根据规范，可以将

any

用作

step

属性的值：

<input type=\"number\" step=\"any\">

    ,        可悲的是，现代浏览器中此输入字段的覆盖率非常低： http://caniuse.com/#feat=输入数字 因此，我建议期待回退，并依靠繁重的程序加载input [type = text]来完成工作，直到该字段被普遍接受为止。 到目前为止，只有Chrome，Safari和Opera具有完整的实现方式，但所有其他浏览器均存在问题。其中一些，甚至似乎都不支持小数（例如BB10）！     ,        在输入上使用lang属性。我的Web应用程序上的语言环境为fr_FR，输入数字为lang = \“ en_EN \”，我可以使用逗号或点。 Firefox始终显示一个点，Chrome始终显示一个逗号。但是两个分隔符都是有效的。     ,        我不知道这是否有帮助，但是在寻找相同问题时，我只是从输入角度偶然发现了这里（即，我注意到我的

<input type=\"number\" />

在输入值时既接受逗号又接受点，但仅后者绑定到我分配给输入的angularjs模型）。 所以我通过记下这个快速指令来解决：

.directive(\"replaceComma\",function() {
    return {
        restrict: \"A\",link: function(scope,element) {
            element.on(\"keydown\",function(e) {
                if(e.keyCode === 188) {
                    this.value += \".\";
                    e.preventDefault();
                }
            });
        }
    };
});

然后，在我的html上，简单地：

<input type=\"number\" ng-model=\"foo\" replace-comma />

会用点号代替逗号，以防止用户输入无效的数字（从JavaScript的角度来看，而不是语言环境！）。干杯。     ,        我找到了一篇博客文章，似乎在解释相关的内容： HTML5输入类型= Chrome中的数字和小数/浮点数 综上所述：

step

有助于定义有效值的域 默认值

step

是

1

因此，默认域是整数（在

min

和

max

之间，如果有的话，包括两端） 我认为这与使用逗号作为千位分隔符和使用逗号作为小数点的歧义混为一谈，而您的

51,983

实际上是被奇怪地解析为5.11万，938.3。 显然，您可以使用

step=\"any\"

将域扩展到范围内的所有有理数，但是我自己还没有尝试过。对于纬度和经度，我已成功使用：

<input name=\"lat\" type=\"number\" min=\"-90.000000\" max=\"90.000000\" step=\"0.000001\">
<input name=\"lon\" type=\"number\" min=\"-180.000000\" max=\"180.000000\" step=\"0.000001\">

它可能并不漂亮，但是可以工作。     ,据我了解，HTML5

input type=\"number

始终将

input.value

返回为returns24ѭ。 显然，“ 25”将当前值作为浮点数返回。您可以使用它返回所需的值。 请参阅http://diveintohtml5.info/forms.html#type-number     ,        您是否考虑过为此使用Javascript？

$(\'input\').val($(\'input\').val().replace(\',\',\'.\'));

    ,        一种选择是

javascript parseFloat()

... 永远不要解析\“

text chain\" --> 12.3456

指向一个整数...

123456

（int删除该点） 将文本链解析为FLOAT ... 将此坐标发送到服务器执行此操作以发送文本链。

HTTP

只发

TEXT

在客户端中不要使用\“

int

\”来解析输入坐标，而是使用文本字符串 如果您使用php或类似工具在html中打印电线，则浮动到文本并以html打印     ,        使用模式

<input 
       type=\"number\" 
       name=\"price\"
       pattern=\"[0-9]+([\\.,][0-9]+)?\" 
       step=\"0.01\"
       title=\"This should be a number with up to 2 decimal places.\"
>

祝好运     ,        1）51983是字符串类型的数字，不接受逗号 所以你应该将其设置为文本

<input type=\"text\" name=\"commanumber\" id=\"commanumber\" value=\"1,99\" step=\'0.01\' min=\'0\' />

用。。。来代替 。 并将type属性更改为number

$(document).ready(function() {
    var s = $(\'#commanumber\').val().replace(/\\,/g,\'.\');   
    $(\'#commanumber\').attr(\'type\',\'number\');   
    $(\'#commanumber\').val(s);   
});

查看http://jsfiddle.net/ydf3kxgu/ 希望这能解决您的问题