我已经看到一些浏览器将input type="number"数字符号本地化。

所以现在，在我的应用程序显示经度和纬度坐标的字段中，我得到了类似“ 51,983”的内容，应该是“ 51.982559”。我的解决方法是input type="text"改用，但我想使用正确显示小数的数字输入。

有没有一种方法可以强制浏览器在数字输入中使用小数点，而不管客户端本地设置如何？

（不用说，在我的应用程序中，无论如何我还是要在服务器端对此进行更正，但是在我的设置中，我还需要在客户端进行校正（因为有一些JavaScript））。

提前致谢。

更新 截至目前，在Windows 7上检查Chrome版本28.0.1500.71 m，输入的数字仅不接受用逗号格式化的小数。具有该step属性的建议建议似乎无效。

http://jsfiddle.net/AsJsj/

当前，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"。

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

通过将step属性指定为所需的小数位数和lang属性[设置为使用句点格式化小数的语言环境设置]，则html5数字输入将接受小数。例如。取值10.56 我的意思是2位小数，执行此操作：

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

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

编辑使用输入区域值将lang属性 添加到输入元素，该区域设置值使用小数点而不是逗号来格式化小数

根据规范，您可以将其any用作step属性的值：

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

在输入上使用lang属性。我的Web应用程序上的语言环境为fr_FR，输入数字为lang =“ en_EN”，我可以使用逗号或点。Firefox始终显示一个点，Chrome始终显示一个逗号。但是两个分隔符都是有效的。

可悲的是，现代浏览器中此输入字段的覆盖范围很低：

http://caniuse.com/#feat=输入数字

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

到目前为止，只有Chrome，Safari和Opera具有完整的实现，但是所有其他浏览器均存在问题。其中一些，甚至似乎都不支持小数（例如BB10）！

我不知道这是否有帮助，但是在寻找相同问题时，我只是从输入角度偶然发现了这里（即，我注意到<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的角度来看，而不是语言环境！）。干杯。

我发现了一篇博客文章，似乎在解释相关内容：
Chrome中的HTML5输入类型=数字和小数/浮点数

综上所述：

• 的 step有助于定义有效值的域
• 默认step是1
• 因此，默认域是整数（在min和之间max（包括在内，如果有的话））

我认为这与使用逗号作为千位分隔符和使用逗号作为小数点的歧义相混淆，而您的 51,983实际上是被奇怪地解析为5.11万，1983和83。

显然，您可以使用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">

它可能不漂亮，但可以。

据我的理解，HTML5input type="number总回报input.value为string。

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

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

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

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

一种选择是javascript parseFloat()...永远不要解析“text chain" --> 12.3456指向一个整数”。123456int的点（int删除该点）将文本链解析为FLOAT ...

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

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

如果您使用php或类似工具在html中打印电线，则浮动到文本并以html打印

1）51983是字符串类型的数字，不接受逗号

所以你应该将其设置为文本

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

用。。。来代替 。

并将type属性更改为number

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

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

希望这能解决您的问题

使用模式

<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."
>

祝好运

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

如果要替换,为.，请完全删除translate_decimals函数。

var input = document.querySelector('input[role="custom-number"]');
var bincr = document.querySelector('button[role="increment"]');
var bdecr = document.querySelector('button[role="decrement"]');

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

/* styling increment & decrement buttons */
button[role="increment"],
button[role="decrement"] {
	width:32px;
}

<input type="text" role="custom-number" step="0.01" min="0" max="0" lang="en" value="1.99">
<button role="increment">+</button>
<button role="decrement">-</button>

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

• 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);

  })

});

HTML步骤属性

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

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

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

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