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

Dev*_*per 5 javascript asp.net-mvc jquery html5 input

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

如何存档?

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

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

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

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

Grz*_*uze 6

目前,该线程提供的答案导致了从用户角度来看更改type="number"type="text"后退的解决方案。

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

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

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

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

<html lang="en-US" > 
Run Code Online (Sandbox Code Playgroud)

您将在输入类型编号中得到点,这将为您提供逗号分隔的值:

<html lang="pl-PL" > 
Run Code Online (Sandbox Code Playgroud)

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

前端处理。

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

这些是我的基本规则。此外,如果您使用某些 JS 方法(例如 parseFloat()),您将在值中得到点,因此如果您处于类似逗号的语言环境,则必须用逗号替换点。

  • html.lang 属性在 IE11 中不起作用。但这对于现代浏览器来说是一个很好/便宜的解决方案。 (2认同)

Dre*_*TeK 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('.',',');
  }
}
Run Code Online (Sandbox Code Playgroud)
<input type="text" pattern="[0-9]+([\,][0-9]+)?" MaxLength="3"/>
Run Code Online (Sandbox Code Playgroud)