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打印此类表单，您将看到带有点分隔值的输入，但如果您使用带有区域设置的Chrome打印此表单 fr-FR您将看不到以逗号分隔的值。如果要强制执行特定的区域设置，可以使用简单的解决方案。使用此属性：

<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输入类型=数字从本地化点来看是不合适的     视图，由于定义和实现。它是     意味着本地化，但根据浏览器的区域设置，你     不能设置甚至不知道是设计师/作者。


在这个帖子中   Localization of input type number   。一个想法是自己处理所有这些逻辑并摆脱它   type =“number”输入，如果可以的话。您可以使用a并为微调器使用自定义插件

Answer 3

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

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

＆＃13;

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('.',',');
  }
}

＆＃13;

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

＆＃13;

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

3 个答案: