html标签输入type =“number”和基于文化的小数点分隔符

Question

当我打开具有另一种文化和UI（即瑞典）的网站以查看正确的小数分隔符时，我需要的是在英文浏览器中。

如何存档？

  <input type="number" step="0.1"  pattern="[0-9]+([\,][0-9]+)?" min="0" max="5" />

如果我在下一次旋转浏览器时应用任何数字，如“0,1”，则将其重置为“0.2”，其中有一个点而不是逗号。

那么如何保持适当的小数分隔符呢？

任何线索如何用jQuery修复它？

Answer 1

目前，该线程提供的答案导致将type="number"更改为type="text"的解决方案，这是从用户的角度退一步。

我以不同的方式处理这个问题。

处理来自后端的数据 - 表格准备。

表单通常提供默认值或值以编辑某些字段。 这就是为什么在表单中为输入提供值的重要性。 有些框架可以在将它们绑定到表单之前为您本地化值，这就是来自服务器（数据库和编程语言）的值可以逗号分隔或点分隔的原因。 如果您提供0.01 （大多数情况）作为输入值，您将在客户端的任何浏览器中都没有错误，但如果您提供的值为0,01 （本地化值），则该值将在浏览器中不可见，但将在输入中提供作为属性，您将收到控制台错误： it is not proper number value 。 所以要做的第一件事就是用“。”代替“，”。 在服务器端渲染表单时，在客户端一直存在点分隔值。

如果您在此时保留此表单，则表单将容易受到浏览器中的区域设置的影响。 如果您在Firefox中使用locale en-US打印此类表单，您将看到带有点分隔值的输入，但如果您使用带有语言环境fr-FR的Chrome打印此表单，您将看不到以逗号分隔的值。 如果要强制执行特定的区域设置，可以使用简单的解决方案。 使用此属性：

<html lang="en-US" >

你会在你的输入类型编号中得到点，这个将给你逗号分隔值：

<html lang="pl-PL" >

lang属性也可以在输入本身设置。

前端处理。

在表单设置为特定区域设置的Firefox中，如果您尝试将点或逗号设置为分隔符，则会出现验证错误 - 根据您的lang设置。 所以请记住，您不能在表单上设置novalidate属性，否则在提交时发送的值将为空。 Chrome会自动将点到逗号或逗号转换为点。

这些是我的基本规则。 此外，如果您使用一些JS方法（如parseFloat（）），您将获得值中的点，因此如果您使用逗号类语言环境，则必须用逗号替换点。

Answer 2

如果我理解，这就是你想要完成的。 whatDecimalSeparator函数告诉您当前浏览器中使用了哪个分隔符

 function whatDecimalSeparator() { var n = 1.1; n = n.toLocaleString().substring(1, 2); return n; } $(document).ready(function(){ var currentSeparator = whatDecimalSeparator(); var currentStep = '0'+ currentSeparator + '1'; $('.js-numberInput')[0].step = currentStep; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="js-numberInput" type="number" step="0.1" pattern="[0-9]+([\\,][0-9]+)?" min="0" max="5" />

更新（Razvan Dumitru评论）：

我发现这个评论：

由于定义和实现，HTML5输入类型=数字从本地化的角度来看是不合适的。 它应该是本地化的，但是根据浏览器的区域设置，您无法设置或甚至不知道它是设计者/作者。

在此线程中输入类型编号的本地化。 一个想法是自己处理所有这些逻辑并摆脱type =“number”输入，如果你能做到这一点。 您可以使用a并使用自定义插件进行微调

Answer 3

浏览器不支持HTML5数字输入分隔符，每个用户体验会因计算机区域设置而异。 强制分离者成为逗号可能不明智。

我能想到的唯一方法就是使用javascript。 以下是使用普通输入字段的一个示例。 不幸的是，您将丢失与数字输入相关联的html5输入属性。

 var Inputs = document.querySelectorAll('input'); for (var i=0; i<Inputs.length; i++) { Inputs[i].onblur = function() { this.value = this.value.replace('.',','); } } function multiplyAndPopulate() { var A1 = theForm.A1field.value.replace(',','.'); var A2 = theForm.A2field.value.replace(',','.'); var R1 = (A1*A2); if (isNaN(R1) == true) { alert('Invalid.'); return false; } else { theForm.R1field.value = R1; theForm.R1field.value = theForm.R1field.value.replace('.',','); } }

 <input type="text" pattern="[0-9]+([\\,][0-9]+)?" MaxLength="3"/>

html标签输入type =“number”和基于文化的小数点分隔符

问题描述

3 个解决方案

解决方案1
3 2017-12-06 13:57:49

解决方案2
2 2014-11-12 15:33:15

解决方案3
2 已采纳 2014-11-12 16:03:15

html标签输入type =“number”和基于文化的小数点分隔符

问题描述

3 个解决方案

解决方案1 3 2017-12-06 13:57:49

解决方案2 2 2014-11-12 15:33:15

解决方案3 2 已采纳 2014-11-12 16:03:15

解决方案1
3 2017-12-06 13:57:49

解决方案2
2 2014-11-12 15:33:15

解决方案3
2 已采纳 2014-11-12 16:03:15