强制在HTML5数字输入框（客户端）中使用小数点而非逗号

Question

我发现一些浏览器在本地化数字的input type="number"标注上有所不同。

因此，现在，在我的应用程序显示经度和纬度坐标的字段中，我得到类似于“51,983”的内容，而实际应该是“51.982559”。我的解决办法是改用input type="text"，但我希望使用正确显示小数位的数字输入。

是否有一种方法可以强制浏览器使用小数点来输入数字，而不管客户端本地设置如何？

（当然，在我的应用程序中，我无论如何都会在服务器端进行更正，但在我的设置中，由于某些JavaScript，我也需要在客户端端正确执行这一操作。）

更新：截至目前，Chrome Version 28.0.1500.71 m在Windows 7上检查时，数字输入框仍然不能接受逗号格式的小数。建议使用step属性的提案似乎无法起作用。

http://jsfiddle.net/AsJsj/

- chocolata

---

你找到解决方案了吗？我在Windows上的Chrome 11上遇到了几乎相同的问题。 - Kostas

目前还没有解决方案。最好的猜测是避免使用这个（并使用input type="text"）直到问题得到解决... - chocolata

看起来取决于您的浏览器语言设置，在我的 Chrome 浏览器中我看到逗号，而在我伴侣的 Chrome 浏览器中我看到圆点。 - fguillen

正如我最近发现的那样，有些国家使用逗号而不是小数点。 - jbutler483

@jbutler483 是的，我们确实这样做，但我们中的一些人尽量避免。令人烦恼的是，制定这些“标准”的人假设某些国家就是这样做的。 - pjdupreez

Answer 1

通过指定step属性的小数精度，以及设置为使用点号格式化小数的区域设置的lang属性，您的HTML5数字输入将接受小数。例如，要接受像10.56这样的值（即保留2位小数），请执行以下操作：

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

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

编辑 在输入元素中添加一个lang属性，其语言环境值格式化小数点而不是逗号。

- Peter

---

仍然无法工作：（客户端本地值始终将小数点转换为逗号，无论步长还是值属性。:( - chocolata

我理解问题并不是关于是否有小数点分隔符的问题，而是当客户端的语言环境偏好于使用“，”时，将“，”替换为“.”的问题。 - Emanuele Paolini

无论您在步骤属性中使用什么十进制分隔符 - 浏览器仍然会进行本地化处理。也就是说，以您提供的示例为例，在大多数欧洲国家显示的数字将是 10.56。 - khartvin

我回来重新阅读了这个问题，五年后想知道为什么我提供了上面的答案。请查看编辑。 - Peter

如果数据是通过ajax保存的，它也无法工作。 - somsgod

Answer 2

目前，Firefox 会使用包含输入元素的 HTML 元素的语言。例如，在 Firefox 中尝试此 jsfiddle：

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

您会发现数字是阿拉伯数字，并且逗号被用作小数分隔符，这是阿拉伯文的规则。这是因为 BODY 标签带有 lang="ar-EG" 属性。

接下来，请尝试这个：

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

这个示例中显示的小数点为 "." ，这是因为输入元素被包装在一个 DIV 中，该 DIV 具有属性 lang="en-US"。

因此，您可以将数字输入包装在一个容器元素中，并将其设为使用小数点作为小数分隔符的语言环境。

- Ashraf Sabry

---

有趣！不幸的是它似乎只能在Firefox中运行，而在Chrome（47.0.2526.106）中不能。 - luis.ap.uyen

构建一个包含 en-US 表单的 fr-FR 页面，尝试输入一个十进制数如 123.45，结果 input.value 是空的。 :-( - Aubin

Firefox尊重页面的语言设置。Chrome强制使用操作系统或浏览器的小数分隔符？Edge会强制使用小数点，而不管页面、浏览器或操作系统的语言设置。真是一团糟。 - bbsimonbb

不需要包装元素。您可以直接在输入元素上设置“lang”属性。 - Krisztián Balla

“lang”属性对我来说真的很重要，谢谢！ - spaark

Answer 3

根据规范，您可以使用any作为step属性的值：

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

- Halil Özgür

Answer 4

在输入框上使用lang属性。我的Web应用程序的区域设置为fr_FR，输入数字时lang="en_EN"，我可以随意使用逗号或点号。Firefox始终显示点号，Chrome显示逗号。但是两个分隔符都是有效的。

- zian974

Answer 5

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

- Andrea Aloi

---

嗨，Andrea，有没有不用Angular JS的方法来做这件事？例如使用jQuery？ - chocolata

当页面及所有数字输入框完全加载后，你可以按每个数字输入框为基础编写以下内容：$("input[type=number]").on("keydown", function(e) { if(e.keyCode === 188) { this.value += "."; e.preventDefault(); }});。此代码的作用是在用户按下逗号键时向当前输入框添加一个小数点，并防止默认行为发生。 - Andrea Aloi

这段代码在Chrome上无法正常运行（测试版本为v60）。当输入“888,”时，设置value属性会弹出一个警告，指出“888.”不是有效的数字（正则表达式要求点后至少有一个数字），并清空该字段。但输入点“.”可以正常工作，可能是因为输入被视为“正在进行中”，需要更多的数字输入。 - svvac

Answer 6

我找到了一篇似乎解释相关内容的博客文章：
HTML5输入类型为数字和Chrome中的小数/浮点数 总之：

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

我认为这可能会引起歧义，即使用逗号作为千位分隔符与使用逗号作为小数点，而您的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">

它可能不太美观，但它能正常工作。

- Matty K

---

在这种情况下，我写了一个摘要然后推断出来，是不是很好？ - Matty K

在我的情况下，GeolocationPosition.coords.latitude 有时会返回像 99.999999999999999 这样的 float。因此，输入步骤将是：step="0.000000000000001"，以成为有效的 required 输入。 - Treedbox

@Treedbox 到第五位小数点，您可以达到1米的精确度，第六位小数点是10厘米的精确度。之后的任何位数（根据您的情况而定）都是不必要的。 - Pierre

Answer 7

很遗憾，现代浏览器对这个输入字段的覆盖范围非常低：http://caniuse.com/#feat=input-number。因此，我建议预计备用方案，并依赖于一个程序重载的input[type=text]来完成工作，直到该字段得到普遍接受为止。到目前为止，只有Chrome、Safari和Opera有一个漂亮的实现，但所有其他浏览器都存在缺陷。其中一些甚至似乎不支持小数（例如BB10）！

- opalenzuela

---

使用像number.js这样的库可能有助于解决地球上存在的多种语言带来的固有问题。 - pintxo

Answer 8

据我所了解，HTML5中的input type="number"始终将input.value作为string返回。

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

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

- Jason Gennaro

---

有趣的是，input.value实际上返回一个带小数点的规范数字，尽管它显示为逗号。所以生活在一个欧洲第三世界国家真糟糕... - Klesun

Answer 9

您考虑过使用Javascript来实现吗？ $('input').val($('input').val().replace(',', '.'));

- mhrvatin

---

在Chrome浏览器中，使用input[type=number]无法正常工作，逗号总是显示出来。 - Revious

Answer 10

以下是一种解决方案，可以使输入逗号被替换为点号。它非常适用于用户连续输入的情况。

思路是创建一个可解析为数字的输入框，例如"123."无法被解析，但"123.0"可以被解析，因此可以将输入框的类型从"text"更改回"number"，仍然能够正常工作。选择该方法只是为了让用户可以连续输入，以便覆盖掉多余的数字。

HTML元素：

<input type="number" id="numberinput">

Javascript

document.getElementById("numberinput").keydown = function(event)
{
    if (
        event.target.getAttribute('type') === "number" &&
        event.key === "," &&
        event.target.value.indexOf(".") === -1)
    {
        event.preventDefault();
        event.target.setAttribute("type","text");
        event.target.value = event.target.value + ".0";
        event.target.setSelectionRange(event.target.value.length - 1, event.target.value.length);
        event.target.setAttribute("type","number");
    }
}

- hsc