在 HTML5数字输入中强制使用小数点代替逗号(客户端)

小开

据我所知，HTML5input type="number总是将 input.value作为 string返回。

Apparently, input.valueAsNumber returns the current value as a floating point number. You could use this to return a value you want.

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

小开

通过将步骤属性指定为所需的小数精度，并将朗属性[设置为使用 环境影响评估格式化小数的区域设置] ，html5数值输入将接受小数。例如取10.56这样的值; ，我的意思是2个小数位数，这样做:

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

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

向 input 元素添加一个朗属性，该属性的 locale 值用点而不是逗号格式化小数

小开

一个选择是 javascript parseFloat()。 never do parse a "text chain" --> 12.3456 with point to a int... 123456 (int remove the point) 将文本链解析为浮点数..。

发送这个坐标到服务器这样做发送一个文本链。 HTTP只发送 TEXT

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

if you print the cords in the html with php or similar... float to text and print in html

小开

我发现了一篇博客文章，似乎解释了一些相关的东西:
HTML5中的输入 type = number 和 decals/float

总之:

step有助于定义有效值的域

默认的 step是 1

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

我认为这和用一个逗号作为分隔符和用一个逗号作为小数点的模糊性相混淆，你的 51,983实际上是一个奇怪的解析510983。

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

也许不怎么样，但很有效。

小开

根据规格，您可以使用 any作为 step属性的值:

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

小开

遗憾的是，这个输入框在现代浏览器中的覆盖率非常低:

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

Therefore, I recommend to expect the fallback and rely on a heavy-programmatically-loaded input[type=text] to do the job, until the field is generally accepted.

到目前为止，只有 Chrome、 Safari 和 Opera 有一个整洁的实现，但是其他浏览器都有 bug。有些甚至不支持小数(比如 BB10) ！

小开

你有没有考虑过用 Javascript 做这件事？

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

小开

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

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

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

Check out http://jsfiddle.net/ydf3kxgu/

希望这能解决你的问题

小开

我不知道这是否有帮助，但是当我在这里寻找同样的问题时，只是从输入的角度(也就是说，我注意到我的 <input type="number" />在输入值时同时接受逗号和点，但是只有后者被绑定到我分配给输入的 angularjs 模型)。 So I solved by jotting down this quick directive:

.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 的角度来看，而不是从本地化的角度来看!)数字。干杯。

小开

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

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

You will see that the numerals are in Arabic, and the comma is used as the decimal separator, which is the case with Arabic. This is because the BODY tag is given the attribute lang="ar-EG".

接下来，试试这个:

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

This one is displayed with a dot as the decimal separator because the input is wrapped in a DIV given the attribute lang="en-US".

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

小开

在输入中使用 lang 属性。在我的 web 应用程序 fr _ FR 上的语言环境，lang = “ en _ EN”在输入数字上，我可以无所谓地使用逗号或点。Firefox 总是显示一个点，Chrome 总是显示一个逗号。但两个分隔符都是有效的。

小开

使用模式

<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 属性适用于以下输入类型: < em > number、 range、 date、 datetime、 datetime-local、 month、 time 和 week。

小开

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

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

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>

小开

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

我终于用一点 jQuery 解决了这个问题。在 Change 中用点代替逗号。到目前为止，在最新的火狐、 Chrome 和 Safari 中，这个功能似乎运行良好。

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


$(this).change(function () {


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


$(this).val($replace);


})


});

小开

下面是启用逗号的输入并将其替换为 国防部的工作方法。它对于用户的连续输入非常有效。

这个想法是有一个可以解析成数字“123”的输入不能被解析，但是“123.0”可以被解析，所以输入的类型可以从“文本”变回“数字”，它仍然可以工作。选择是“刚刚”启用连续输入，所以用户覆盖额外的数字

HTML element:

<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");
}
}