我发现一些浏览器在本地化数字的input type="number"标注上有所不同。
因此，现在，在我的应用程序显示经度和纬度坐标的字段中，我得到类似于“51,983”的内容，而实际应该是“51.982559”。我的解决办法是改用input type="text"，但我希望使用正确显示小数位的数字输入。
是否有一种方法可以强制浏览器使用小数点来输入数字，而不管客户端本地设置如何？
（当然，在我的应用程序中，我无论如何都会在服务器端进行更正，但在我的设置中，由于某些JavaScript，我也需要在客户端端正确执行这一操作。）
更新：截至目前，Chrome Version 28.0.1500.71 m在Windows 7上检查时，数字输入框仍然不能接受逗号格式的小数。建议使用step属性的提案似乎无法起作用。
我需要确保在输入值时，逗号仍然可以作为小数分隔符，而不是点。这似乎是一个古老的问题。可以在以下链接中找到背景信息：
我最终用一点jQuery解决了它。在onChange事件中用点替换逗号。到目前为止，这似乎在最新的Firefox、Chrome和Safari中都很好用。
$('input[type=number]').each(function () {
$(this).change(function () {
var $replace = $(this).val().toString().replace(/,/g, '.');
$(this).val($replace);
})
});
我已经编写了一段自定义代码来完成这个任务。
如果你想用.替换,，可以完全删除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>一个选项是使用javascript parseFloat()...
不要用整数解析带有点的"文本字符串" --> 12.3456，以避免将其转化为整数123456 (去除小数点后转换成整数)。将文本串解析为浮点数...
将此坐标发送到服务器时，请使用发送文本串的方式。 HTTP 只会发送文本
在客户端中，不要使用"int"对输入坐标进行解析，而是使用文本字符串进行操作
如果您想在 HTML 中使用 PHP 或类似的程序打印坐标，请将浮点数转化为文本并在 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/
希望这能解决你的问题
pattern="\d+\.\d{2}"，我甚至会称这样的用户体验是可接受的... 不过，我会放弃jquery部分... - Klesun使用模式
<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."
>
祝你好运
<input type="number" name="points" step="3">
提示：step 属性可以与 max 和 min 属性一起使用，创建一系列合法值。
step="3" 会限制输入为整数。而设置 step="0.01" 仍然显示它为逗号 ;c - Klesun