在 HTML5 数字输入中强制使用小数点而不是逗号（客户端）

使用指定为所需小数精度的 step 属性和 lang 属性 [设置为使用句点格式化小数的区域设置]，您的 html5 数字输入将接受小数。例如。取 10.56 之类的值；我的意思是 2 位小数，这样做：

<input type="number" step="0.01" min="0" lang="en" value="1.99">

您可以进一步为最大允许值指定 max 属性。

编辑向输入元素添加一个语言属性，其语言环境值使用点而不是逗号格式化小数

---

目前，Firefox 支持输入所在的 HTML 元素的语言。例如，在 Firefox 中试试这个小提琴：

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

您将看到数字是阿拉伯文，逗号用作小数分隔符，阿拉伯文就是这种情况。这是因为 BODY 标记具有属性 lang="ar-EG"。

接下来，试试这个：

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

这个以点作为小数点分隔符显示，因为输入被包裹在 DIV 中，给定属性 lang="en-US"。

因此，您可能会采用的解决方案是使用容器元素包装您的数字输入，该容器元素设置为使用使用点作为小数分隔符的区域性。

---

根据 spec，您可以使用 any 作为 step 属性的值：

<input type="number" step="any">

---

在输入上使用 lang 属性。我的网络应用程序 fr_FR 上的语言环境，输入数字上的 lang="en_EN"，我可以无所谓地使用逗号或点。 Firefox 总是显示一个点，Chrome 显示一个逗号。但两个分隔符都是有效的。

---

可悲的是，现代浏览器中此输入字段的覆盖率非常低：

http://caniuse.com/#feat=input-number

因此，我建议期待回退并依靠大量程序加载的 input[type=text] 来完成这项工作，直到该字段被普遍接受。

到目前为止，只有 Chrome、Safari 和 Opera 有一个简洁的实现，但所有其他浏览器都有 bug。其中一些，甚至似乎不支持小数（如 BB10）！

---

我发现一篇博客文章似乎解释了一些相关的事情：
HTML5 input type=number and decimals/floats in Chrome

总之：

该步骤有助于定义有效值的域

默认步长为 1

因此默认域是整数（在 min 和 max 之间，包括，如果给定）

我认为这与使用逗号作为千位分隔符与使用逗号作为小数点的歧义混为一谈，而您的 51,983 实际上是一个奇怪的解析五万一千九百八三。

显然您可以使用 step="any" 将域扩大到范围内的所有有理数，但是我自己没有尝试过。对于经纬度我已经成功使用：

<input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
<input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">

它可能不漂亮，但它有效。

---

我不知道这是否有帮助，但我在搜索同样的问题时偶然发现了这里，只是从 input 的角度来看（即我注意到我的 <input type="number" /> 接受逗号和点输入值时，但只有后者被绑定到我分配给输入的 angularjs 模型）。所以我通过记下这个快速指令来解决：

.directive("replaceComma", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.on("keydown", function(e) {
                if(e.keyCode === 188) {
                    this.value += ".";
                    e.preventDefault();
                }
            });
        }
    };
});

然后，在我的 html 中，只需：<input type="number" ng-model="foo" replace-comma /> 将用点替换逗号，以防止用户输入无效（从 javascript 的角度来看，而不是语言环境！）数字。干杯。

---

据我了解，HTML5 input type="number 始终将 input.value 作为 string 返回。

显然，input.valueAsNumber 将当前值作为浮点数返回。您可以使用它来返回您想要的值。

请参阅http://diveintohtml5.info/forms.html#type-number

---

您是否考虑过为此使用Javascript？

$('input').val($('input').val().replace(',', '.'));

---

一个选项是 javascript parseFloat()...永远不要解析带有指向 int 的 "text chain" --> 12.3456...123456 (int remove the point) 将文本链解析为 FLOAT...

将此坐标发送到服务器执行此发送文本链。 HTTP 只发送 TEXT

在客户端中，不要使用“int”解析输入坐标，使用文本字符串

如果您使用 php 或类似方法在 html 中打印绳索...浮动到文本并在 html 中打印

---

1) 51,983 是字符串类型的数字，不接受逗号

所以你应该把它设置为文本

<input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />

用。。。来代替 。

并将类型属性更改为数字

$(document).ready(function() {
    var s = $('#commanumber').val().replace(/\,/g, '.');   
    $('#commanumber').attr('type','number');   
    $('#commanumber').val(s);   
});

查看http://jsfiddle.net/ydf3kxgu/

希望这可以解决您的问题

---

我已经编写了一段自定义代码来执行此操作

如果您想用 . 替换 ,，请完全删除 translate_decimals 函数。

var input = document.querySelector('input[role="custom-number"]'); var bincr = document.querySelector('button[role="increment"]'); var bdecr = document.querySelector('button[role="decrement"]');函数 translate_decimals(side = 0) { input.value = (side == ',' ? input.value.replace('.',',') : input.value.replace(',','.')) ; } translate_decimals(','); bincr.addEventListener('click', ()=>{ if (input.hasAttribute('max')) { if (input.value.substr(0,input.getAttribute('max').length) == input. getAttribute('max').substr(0,input.getAttribute('max').length)) { return; } else { translate_decimals('.'); let temp = input.value; input.value = ""; input.value = (input.hasAttribute('step') ? (parseFloat(temp) + parseFloat(input.getAttribute('step'))) : temp++); translate_decimals(','); } } }); bdecr.addEventListener('click', ()=>{ if (input.hasAttribute('min')) { if (input.value.substr(0,input.getAttribute('min').length) == input. getAttribute('min').substr(0,input.getAttribute('min').length)) { return; } else { translate_decimals('.'); input.value = (input.hasAttribute('step') ? (input.value - input.getAttribute('step')) : input.value--); translate_decimals(','); } } }); /* 增加和减少按钮的样式 */ button[role="increment"], button[role="decrement"] { width:32px; } + -

---

我需要确保仍然可以使用逗号而不是点作为小数分隔符输入值。这似乎是一个古老的问题。背景信息可以在以下链接中找到：

https://www.slightfuture.com/webdev/html5-input-number-localization.html

https://codepen.io/aminimalanimal/full/bdOzRG

我终于用一点 jQuery 解决了它。用点 onChange 替换逗号。到目前为止，这似乎在最新的 Firefox、Chrome 和 Safari 中运行良好。

$('input[type=number]').each(function () {

  $(this).change(function () {

    var $replace = $(this).val().toString().replace(/,/g, '.');

    $(this).val($replace);

  })

});

---

以下是启用逗号输入并将其替换为 dod 的工作方法。它非常适合用户的连续输入。

这个想法是有一个可以解析成数字“123”的输入。无法解析，但可以解析“123.0”，因此输入的类型可以从“文本”更改回“数字”，它仍然有效。选择“只是”以启用连续输入，因此用户会覆盖附加数字

HTML 元素：

<input type="number" id="numberinput">

Javascript

document.getElementById("numberinput").keydown = function(event)
{
    if (
        event.target.getAttribute('type') === "number" &&
        event.key === "," &&
        event.target.value.indexOf(".") === -1)
    {
        event.preventDefault();
        event.target.setAttribute("type","text");
        event.target.value = event.target.value + ".0";
        event.target.setSelectionRange(event.target.value.length - 1, event.target.value.length);
        event.target.setAttribute("type","number");
    }
}

---

使用模式

<input 
       type="number" 
       name="price"
       pattern="[0-9]+([\.,][0-9]+)?" 
       step="0.01"
       title="This should be a number with up to 2 decimal places."
>

祝你好运

---

HTML 步骤属性

<input type="number" name="points" step="3">

示例：如果 step="3"，则合法数字可以是 -3、0、3、6 等。

提示： step 属性可以与 max 和 min 属性一起使用，以创建一系列合法值。

注意：step 属性适用于以下输入类型：数字、范围、日期、日期时间、本地日期时间、月、时间和周。

---