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

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

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

有没有办法强制浏览器在数字input中使用小数点 ,而不考虑客户端本地设置?

(不用说,在我的应用程序中,无论如何纠正这在服务器端,但在我的设置,我也需要它在客户端正确(由于一些JavaScript))。

提前致谢。

更新截至目前,在Windows 7中检查Chrome版本28.0.1500.71 m,input的数字不接受用逗号格式化的小数。 使用step属性提出的build议似乎不起作用。

http://jsfiddle.net/AsJsj/

使用指定的小数点精度的step属性,您的html5数字input将接受小数。 例如。 取值10.56; 我的意思是2位小数的数字,这样做:

 <input type="number" step="0.01" min="0" > 

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

目前,Firefox支持input所在HTML元素的语言。 例如,在Firefox中试试这个小提琴:

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

你会看到数字是阿拉伯数字,逗号用作小数点分隔符,阿拉伯语就是这种情况。 这是因为BODY标签被赋予了属性lang="ar-EG"

接下来,试试这个:

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

这个显示的小数点作为分隔符,因为input被封装在一个给定属性lang="en-US"DIV

因此,您可能采取的解决scheme是将您的数字input封装为一个容器元素,该元素被设置为使用使用点作为小数点分隔符的文化。

根据规范 ,你可以使用any作为step属性的值:

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

还没有testing,但尝试使用“step”属性,如下所述:

http://www.w3.org/TR/html-markup/input.number.html#input.number.attrs.step.float

做这样的事情:

 <input type="number" min="0" max="999" step="0.000001"> 

可悲的是,在现代浏览器中这个input字段的覆盖率非常低:

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

因此,我build议期待回退,并依靠大量程序加载的input[type = text]来完成这项工作,直到该字段被普遍接受。

到目前为止,只有Chrome,Safari和Opera有一个整洁的实现,但所有其他浏览器是越野车。 其中一些,甚至似乎不支持小数(如BB10)!

1)51,983是一个stringtypes的数字不接受逗号

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

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

用。。。来代替 。

并将types属性更改为数字

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

退房http://jsfiddle.net/ydf3kxgu/

希望这能解决你的问题

我不知道这是否有帮助,但当我search这个相同的问题,我只是从input的angular度(即我注意到我的<input type="number" />同时接受逗号和点键入值,但只有后者被绑定到我分配给input的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 />将用逗号replace逗号以防止用户input无效(从javascript的angular度来看,不一个语言环境!)号码。 干杯。

我发现了一篇博文,似乎解释了一些相关的内容: http : //blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

综上所述:

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

我认为这与使用逗号作为千位分隔符和逗号作为小数点的含糊之处相混淆,而您的51,983实际上是一个奇怪地被parsing的五万九千八百三十三。

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

它可能不漂亮,但它的作品。

编辑:更新的链接是https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome/

据我了解,HTML5 input type="number总是以string返回input.value

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

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

你有没有考虑过使用JavaScript呢?

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

一个选项是javascript parseFloat() …从来没有parsing一个“ text chain" --> 12.3456指向一个int … 123456 (int删除点)parsing文本链到FLOAT …

发送这个坐标到一个服务器做这个发送文本链。 HTTP只发送TEXT

在客户端不用parsinginput的“ int ”,使用文本string

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