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

Question

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

所以现在，在我的应用程序显示经度和纬度坐标的字段中，我得到像“51,983”这样的东西，它应该是“51.982559”。我的解决方法是使用input type="text"代替，但我想使用正确显示小数的数字输入。

是否有办法强制浏览器在数字输入中使用小数点，无论客户端本地设置如何？

（不言而喻，在我的应用程序中我无论如何都在服务器端纠正这个问题，但在我的设置中我还需要它在客户端正确（因为一些JavaScript））。

提前致谢。

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

http://jsfiddle.net/AsJsj/

Answer 1

将 步 属性指定为所需小数的精度，html5数字输入将接受小数。例如。取值10.56;我是指2位小数，请执行以下操作：

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

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

<强> 修改 将 lang 属性添加到输入元素，其区域设置值使用点而不是逗号格式化小数

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

因此，我建议期望回退并依赖重度编程加载的输入[type = text]来完成工作，直到该字段被普遍接受。

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

Answer 5

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

总结：

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

我认为这与使用逗号作为千分隔符而不是逗号作为小数点的模糊性相混淆，而你的51,983实际上是一个奇怪解析的五十一，九百零八 - 3。

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

它可能不太漂亮，但它确实有效。

Answer 6

我不知道这是否有帮助，但我在搜索同样的问题时偶然发现，只是从输入的角度来看（即我注意到我的<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角度来看，而不是语言环境！）数字。欢呼声。

Answer 7

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

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

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

Answer 8

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

将此coords发送到服务器执行此操作以发送文本链。 HTTP仅发送TEXT

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

如果你用PHP或类似的方式在html中打印线...浮动到文本并用html打印

Answer 9

您是否考虑过使用Javascript？

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

Answer 10

1）51,983是字符串类型号不接受逗号

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

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

替换，用。

并将type属性更改为数字

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

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

希望这能解决你的问题

Answer 11

在输入上使用lang attribut。我的网络应用上的区域设置fr_FR，lang =＆＃34; en_EN＆＃34;在输入数字上，我可以无差别地使用逗号或点。 Firefox总是显示一个点，Chrome显示一个逗号。但两个separtor都有效。

Answer 12

我已经编写了一段自定义代码来实现这一目的

如果要将,替换为.，请完全删除 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>

Answer 13

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

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

  })

});

Answer 14

使用模式

def list_cut(letterlist, wordlist, cutters, cutspots):
    out_list = []
    for sub_list, string in zip(wordlist, letterlist):
        cut_list = cut_string(string, cutters, cutspots)
        out_list.append([word in cut_list for word in sub_list])
    return out_list

wordfinder = list_cut(letterlist, wordlist, cutters, cutspots)
print(wordfinder) #[[True, False]]

祝你好运

Answer 15

HTML步骤属性

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

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

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

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