html标记输入类型=“number”和基于区域性的十进制分隔符



当我打开具有另一种文化和用户界面(即瑞典)的网站时,我需要在英文浏览器中查看正确的小数分隔符。

如何存档?

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

如果我在下一次点击微调器Browser时应用了任何像"0,1"这样的数字,则将其重置为"0.2",它有一个点而不是逗号。

那么如何保持正确的小数分隔符呢?

知道如何用jQuery修复它吗?

当前此线程提供的答案导致将type="number"更改为type="text"的解决方案,从用户的角度来看,这是一个倒退。

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

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

表单通常为某些字段提供默认值或要编辑的值。这就是为什么如何在表单中为输入提供值很重要。有些框架可以在将值绑定到表单之前为您本地化值,这就是为什么来自服务器(数据库和编程语言)的值可以是逗号分隔的或点分隔的。如果您提供0.01(大多数情况下)作为输入值,则在客户端的任何浏览器中都不会出现错误,但如果您提供值0,01(本地化值),则该值在浏览器中不可见,但将作为属性在输入中提供,并且您将得到控制台错误:it is not proper number value因此,在服务器端呈现表单时,首先要做的是将","替换为".",以便在客户端始终存在点分隔的值

如果您将其保留在此时,您的表单将容易受到浏览器中区域设置的攻击。如果你在Firefox中使用locale en US打印这样的表单,你会看到一个以点分隔的值的输入,但如果你使用Chrome使用locale打印这个表单fr-fr您将看不到逗号分隔的值。如果您想强制执行特定的区域设置,有一个简单的解决方案。具有此属性:

<html lang="en-US" > 

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

<html lang="pl-PL" > 

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

前端处理

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

这些是我的基本规则。此外,如果你使用一些JS方法,如parseFloat(),你会在值中得到点,所以如果你在类似逗号的区域设置中,你必须用逗号替换点。

浏览器不太支持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"/>

如果我理解,这就是你想要实现的。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从本地化角度来看不够由于定义和实现。是的旨在本地化,但根据浏览器的区域设置不能设定,甚至不知道自己是设计师/作者。

在这个线程中输入型号的本地化一个想法是自己处理所有这些逻辑,并摆脱type="number"输入,如果可以的话。您可以使用和使用旋转器的自定义插件

最新更新