Chrome浏览器中,类型为“number”的HTML5输入框不接受逗号。

26

我正在使用带有type="number"的HTML5输入框。根据一些文档,如果我还使用lang=""属性,应该可以输入逗号而不是句点的数字。在Firefox中运作正常,但在Chrome中无法接受逗号。我该如何让Chrome接受输入框中的逗号?我的问题是我们的德国用户期望他们可以在那里输入逗号而不是句点。

https://jsfiddle.net/byte2702/y3Lpfw7m/

Please enter a number with comma: <br/>
<input id="num" type="number" step="any" lang="de" pattern="-?[0-9]+[\,.]*[0-9]+" /> 

1
我认为这取决于客户端的本地配置。火狐浏览器在这方面很好,但是Chrome根本不支持它。解决方法可以通过JavaScript检测模糊或提交事件,然后用逗号替换点。 - Marcos Pérez Gude
1
在巴西,我们也使用逗号。您可以使用简单的文本输入并使用JavaScript进行一些操作。例如,您可以创建两个按钮来模拟数字输入的功能。 - Phiter
我会尝试一下。非常感谢你们两个。我已经考虑过type="text",但我想先尝试type="number"。 - Jana Weschenfelder
3
当“模拟数字输入”时,您忽略了所有使用移动设备的用户,他们会在type="number"的输入框中看到数字键盘。 参考:https://dev59.com/rHA75IYBdhLWcg3wS3BA - Avatar
2
我们以前用 var newValue = value.replace(/,/g, "."); 解决了这个问题。在桌面电脑和移动设备上都可以正常工作。我们的客户有数百万的网站访问者,其中许多人使用移动设备。目前还没有任何投诉。我们也对 Android 和 iOS 设备进行了广泛的测试。 - Jana Weschenfelder
2
我们应该在开发者网站上报告这个作为Chrome的错误吗?“input”应该始终接受句号和逗号。--更新,已提交:https://bugs.chromium.org/p/chromium/issues/detail?id=793673 - Avatar
5个回答

12

实际上,如果我正确阅读了文档,pattern 不支持 type=number。因此,请使用 type=text 并为前端验证添加 pattern="..."。在下一步中,如果输入的内容不符合JavaScript/计算机格式,您需要将文本输入转换为实际数字。

到了2017年,仍然没有解决这个常见问题的好方法...


14
移动用户在点击输入框时会得到一个数字输入。如果您将其更改为文本,则不再是这种情况。这不是好的做法。 - Martin Dawson
实际上,如果我没记错的话,这个问题是针对桌面浏览器的。对于移动浏览器,描述的问题并不存在,因为移动操作系统会自动处理适当的小数分隔符。因此,如果您想同时针对两个系统并拥有来自世界各地的用户,您将不得不根据浏览器的类型生成不同类型的输入以获得完美的体验。 - Jörn Berkefeld
我们当时已经解决了文本输入和JavaScript的问题。请查看我的问题下面的评论部分,特别是Phiter的答案和我的最后一个答案。该解决方案适用于桌面Web浏览器和移动Web浏览器。 - Jana Weschenfelder
1
2019年了,这个问题仍然没有好的解决方案。看起来这几乎应该是CSS3应该具备的功能... - OG Sean

3
截止目前(2017年8月30日),安托万·泰里的答案在Chrome浏览器中已经不再有效(我的版本是60.0.3112.113)。不幸的是,我没有其他建议,除了使用JavaScript模拟type =“number”。

是的。那时候我们也是这样做的。我们使用了jQuery/JavaScript来解决这个问题。 - Jana Weschenfelder
尝试了所有方法后,这似乎是在Chrome中有效的唯一方法。 - lukas_o
1
虽然这个答案提供了解决问题的建议,但其中一半的答案是对Antoine Thiry的其他答案的引用,而我找不到任何迹象。可能有些东西被删除了或者某人的名字改变了,但我认为这个“悬空指针”很烦人... - Jasper

0
HTML5的type="number"输入字段旨在适应本地设置,也称为本地化。这意味着它的行为,如数字格式化,取决于浏览器的区域设置。然而,这会带来一个限制,因为您无法手动调整这些特定元素的区域设置,也无法确定浏览器设置的区域。
您可以使用inputmode="numeric"以及限制字符为数字和相关字符的pattern属性,而不是使用type="number"。这将允许您接受任何格式的数字。
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" inputmode="numeric">

0

目前为止,我已经尝试过

    <html lang="en">

或者

    <input type="number" lang="en">

它让我输入任何逗号或句号。我已在桌面版Ubuntu和移动版Android上的Firefox和Chrome中进行了测试。


1
很不幸,在Chrome 68中,使用en-US语言环境对我无效:我可以使用句点作为小数分隔符,但逗号无法使用。 - Lauri Harpf
刚在 Chrome 68.0.3440.75 上测试了一下,该浏览器是在 Ubuntu 上构建的,运行在 Ubuntu 16.04 和 Firefox 上。我可以写 0.50,5.5,5 并在 JavaScript 计算或 PHP 脚本中使用它们。但我只使用 en,而不是 en-US。 - Sergey S
抱歉,我的原始评论不够清晰。我在HTML中使用了lang="en",但是Chrome已配置为en-US语言环境。在https://jpm5omvnl5.codesandbox.io/上设置一个示例:我无法写入**0,5**,但我可以写入**0.5**。在请求中,我的Chrome发送accept-language: fi-FI,fi;q=0.9,en-US;q=0.8,en;q=0.7(底层操作系统为fi-FI,看起来Chrome包括它,尽管Chrome配置不是这样)。Chrome版本为68.0.3440.106(Official Build)(64位),操作系统为Windows 10 Pro。可能是操作系统/语言环境设置的差异? - Lauri Harpf
在 Daniel Aleksandersen 的博客文章 HTML5 number inputs - 逗号和点作为小数分隔符 中,我发现了一张表格,分析了在 HTML 和输入中使用不同语言组合时 input type="number" 行为。根据该表格,浏览器似乎对此有不同的响应;一些浏览器允许逗号和点两种符号,而其他浏览器则不允许。 - Lauri Harpf
是的,我曾经遇到过这样的情况,在Windows和Linux中相同的浏览器之间存在细微差异。有时候文档类型也会产生影响。我看到了这篇帖子,我尝试了en-150,但它对我没有起作用。为了确保它对你不起作用,可以创建一个类似下面的小测试HTML文件。 - Sergey S
`<!DOCTYPE html><html lang="en"> <head> </head> <body> <form> <input step="0.01" value="" onchange="calc_sum(this)" onkeyup="calc_sum(this)" type="number"> <span id="sum">0</span> </form> <script> function calc_sum(a){ document.getElementById('sum').innerHTML = parseFloat(document.getElementById('sum').innerHTML) + a.value*1; } </script> </body> </html>` - Sergey S

-2

你好Mohimanul Islam,我们的情况是有一个C# ASP.NET WebApp,PHP对我们来说不适用。换句话说,我需要一个客户端脚本,而不是服务器端脚本。也许问题没有完全表述清楚。 - Jana Weschenfelder

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接