在HTML5数字输入中强制小数点而不是逗号(客户端)

问题描述 投票:61回答:12

我已经看到一些浏览器本地化input type="number"数字符号。

所以现在,在我的应用程序显示经度和纬度坐标的字段中,我得到像“51,983”这样的东西,它应该是“51.982559”。我的解决方法是使用input type="text"代替,但我想使用正确显示小数的数字输入。

有没有办法强制浏览器在数字输入中使用小数点,无论客户端本地设置如何?

(不言而喻,在我的应用程序中,我无论如何都要在服务器端纠正这一点,但在我的设置中我还需要它在客户端是正确的(因为一些JavaScript))。

提前致谢。

更新截至目前,在Windows 7上检查Chrome版本28.0.1500.71 m,输入的数字不接受用逗号格式化的小数。使用stepattribute提出的建议似乎不起作用。

http://jsfiddle.net/AsJsj/

html5 input types numbers decimal
12个回答
17
投票

目前,Firefox尊重输入所在的HTML元素的语言。例如,在Firefox中尝试这个小提琴:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

您将看到数字是阿拉伯语,逗号用作小数分隔符,阿拉伯语就是这种情况。这是因为BODY标签的属性为lang="ar-EG"

接下来,尝试这个:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

这个显示时带点作为小数分隔符,因为输入包含在DIV中,给定属性lang="en-US"

因此,您可以使用的解决方案是使用容器元素包装数字输入,该容器元素设置为使用使用点作为小数分隔符的区域性。


0
投票

一个选项是qazxsw poi ...永远不会解析“qazxsw poi指向int ... javascript parseFloat()(int删除点)解析文本链到FLOAT ...

将此coords发送到服务器执行此操作发送文本链。 text chain" --> 12.3456只发送123456

在客户端不要使用“HTTP”解析输入坐标,使用文本字符串

如果你用PHP或类似的方式在html中打印线...浮动到文本并在html中打印


-1
投票

1)51,983是一个字符串类型号,不接受逗号

所以你应该把它设置为文本

TEXT

用。。。来代替 。

并将type属性更改为number

int

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

希望这能解决你的问题


-1
投票

使用模式

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

祝好运


17
投票

如果将step属性指定为所需小数的精度,则html5数字输入将接受小数。例如。取值10.56;我是指2位小数,请执行以下操作:

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

您可以进一步指定最大允许值的max属性。

编辑使用语言环境值为输入元素添加lang属性,该值使用点而不是逗号格式化小数


7
投票

根据spec,您可以使用any作为step属性的值:

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

2
投票

遗憾的是,现代浏览器中此输入字段的覆盖率非常低:

http://caniuse.com/#feat=input-number

因此,我建议期望回退并依赖于以编程方式加载的输入[type = text]来完成工作,直到该字段被普遍接受为止。

到目前为止,只有Chrome,Safari和Opera有一个很好的实现,但所有其他浏览器都有错误。其中一些,甚至似乎不支持小数(如BB10)!


2
投票

在输入上使用lang attribut。我的网络应用上的区域设置fr_FR,输入数字上的lang =“en_EN”,我可以无差别地使用逗号或点。 Firefox总是显示一个点,Chrome显示一个逗号。但两个separtor都是有效的。


1
投票

我不知道这是否有帮助,但我在搜索同样的问题时偶然发现,只是从输入的角度来看(即我注意到我的<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角度来看,而不是语言环境!)数字。干杯。


1
投票

我找到了一篇博客文章,似乎解释了一些相关内容: HTML5 input type=number and decimals/floats in Chrome

综上所述:

  • step有助于定义有效值的域
  • 默认的step1
  • 因此默认域是整数(在minmax之间,包括在内,如果给出)

我认为这与使用逗号作为千分隔符而不是逗号作为小数点的模糊性相混淆,而你的51,983实际上是一个奇怪解析的五十一,一千九百八十三。

显然你可以使用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">

它可能不漂亮,但它的工作原理。


0
投票

据我所知,HTML5 input type="number总是将input.value作为string返回。

显然,input.valueAsNumber将当前值作为浮点数返回。您可以使用它来返回您想要的值。

http://diveintohtml5.info/forms.html#type-number


0
投票

您是否考虑过使用Javascript?

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

© www.soinside.com 2019 - 2024. All rights reserved.