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

Question

我已经看到一些浏览器本地化input type="number"数字的表示法.

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

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

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

提前致谢.

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

http://jsfiddle.net/AsJsj/

Answer 1

目前,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".

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

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

在输入上使用 lang 属性。我的网络应用程序 fr_FR 上的语言环境，输入数字上的 lang="en_EN" 并且我可以无差别地使用逗号或点。Firefox 总是显示一个点，Chrome 显示一个逗号。但两个分隔符都是有效的。

Answer 5

我发现一篇博客文章似乎解释了一些相关的内容：
Chrome 中的 HTML5 input type=number and decimals/floats

总之：

• 将step有助于定义有效值的域
• 默认step是1
• 因此默认域是整数（在min和之间max，包括，如果给定）

我认为这与使用逗号作为千位分隔符与使用逗号作为小数点的歧义相混淆，而您51,983的实际上是一个奇怪的解析 51009983。

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

它可能不漂亮，但它有效。

Answer 6

遗憾的是，这个输入字段在现代浏览器中的覆盖率非常低：

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

因此，我建议期待回退并依靠大量编程加载的 input[type=text] 来完成这项工作，直到该领域被普遍接受。

到目前为止，只有 Chrome、Safari 和 Opera 有一个简洁的实现，但所有其他浏览器都有缺陷。其中一些，甚至似乎不支持小数（如 BB10）！

Answer 7

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

Answer 8

据我了解，HTML5input type="number总是input.value以string.

显然，input.valueAsNumber以浮点数形式返回当前值。您可以使用它来返回您想要的值。

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