输入type="number">

而不是step="any"，它允许小数位数，使用step=".01"，它允许最多两个小数位数。

更多细节请参见规范:https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

试着在输入类型中只允许2个小数

<input type="number" step="0.01" class="form-control"  />

或者使用jQuery的建议@SamohtVII

$( "#ELEMENTID" ).blur(function() {
this.value = parseFloat(this.value).toFixed(2);
});

将HTML数字输入框与onchange事件挂钩

myHTMLNumberInput.onchange = setTwoNumberDecimal;

或者HTML代码

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

步骤2:编写setTwoDecimalPlace方法

function setTwoNumberDecimal(event) {
this.value = parseFloat(this.value).toFixed(2);
}

你可以通过改变传递给toFixed()方法的值来改变小数点后的位数。看到MDN文档。

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer

关于货币，我建议:

<div><label>Amount $
<input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>

看到http://jsfiddle.net/vx3axsk5/1/

HTML5属性“step”，“min”和“pattern”将在表单提交时验证，而不是onblur。如果你有pattern，你就不需要step;如果你有step，你就不需要pattern。所以你可以用我的代码返回到step="any"，因为模式无论如何都会验证它。

如果你想验证onblur，我相信给用户一个视觉提示也很有帮助，比如把背景染成红色。如果用户的浏览器不支持type="number"，它将回退到type="text"。如果用户的浏览器不支持HTML5模式验证，我的JavaScript代码片段不会阻止表单提交，但它会给出一个可视提示。所以对于那些HTML5支持较差的人，以及那些试图在禁用JavaScript的情况下入侵数据库或伪造HTTP请求的人，你需要在服务器上再次验证。前端验证的目的是为了更好的用户体验。所以只要你的大多数用户都有良好的体验，你就可以依赖HTML5的功能，只要代码仍然可以工作，并且你可以在后端进行验证。

如果有人正在寻找一个正则表达式，只允许数字与可选的2小数点后

^\d*(\.\d{0,2})?$

例如，我发现下面的解决方案相当可靠

HTML:

<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />

JS / JQuery:

$(document).on('keydown', 'input[pattern]', function(e){
var input = $(this);
var oldVal = input.val();
var regex = new RegExp(input.attr('pattern'), 'g');


setTimeout(function(){
var newVal = input.val();
if(!regex.test(newVal)){
input.val(oldVal);
}
}, 1);
});

使用这段代码

<input type="number" step="0.01" name="amount" placeholder="0.00">

HTML5 Input元素的默认Step值为Step ="1"。

输入:

step="any"
class="two-decimals"

脚本:

$(".two-decimals").change(function(){
this.value = parseFloat(this.value).toFixed(2);
});

我发现使用jQuery是我最好的解决方案。

$( "#my_number_field" ).blur(function() {
this.value = parseFloat(this.value).toFixed(2);
});

只写

<input type="number" step="0.1" lang="nb">

Lang ='nb"让你用逗号或句号来写小数

你可以用这个。反应钩子

<input
type="number"
name="price"
placeholder="Enter price"
step="any"
required
/>

我也有同样的要求，但在检查了所有这些答案后，我意识到没有内置的支持来阻止用户输入特定数量的小数点。step="0.01"在验证输入的十进制数时很有用，但它仍然不会阻止用户输入任何小数。在我的情况下，我想要一个解决方案，将防止用户输入无效的小数。所以我创建了自己的自定义JavaScript函数，它将强制用户任何十进制规则。有一个轻微的性能问题，但对于我的场景，有一个非常小的延迟是可以的，以确保用户没有输入无效的小数点后数位。它可能是有用的人谁想要防止用户输入无效的十进制值。

如果你愿意，你可以在step="0.01"中使用这个解决方案。你可以在元素oninput事件上使用下面的函数。如果性能对你来说很重要，那么考虑在onchange事件而不是oninput事件上使用它。并且请在data-decimal属性中指定输入中允许的最大小数位数。它可以有从0到任何数字的值。

function enforceNumberValidation(ele) {
if ($(ele).data('decimal') != null) {
// found valid rule for decimal
var decimal = parseInt($(ele).data('decimal')) || 0;
var val = $(ele).val();
if (decimal > 0) {
var splitVal = val.split('.');
if (splitVal.length == 2 && splitVal[1].length > decimal) {
// user entered invalid input
$(ele).val(splitVal[0] + '.' + splitVal[1].substr(0, decimal));
}
} else if (decimal == 0) {
// do not allow decimal place
var splitVal = val.split('.');
if (splitVal.length > 1) {
// user entered invalid input
$(ele).val(splitVal[0]); // always trim everything after '.'
}
}
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" data-decimal="0" oninput="enforceNumberValidation(this)" placeholder="No decimal places" value="" />
<input type="number" data-decimal="2" oninput="enforceNumberValidation(this)" placeholder="2 decimal places" value="" />
<input type="number" data-decimal="5" oninput="enforceNumberValidation(this)" placeholder="5 decimal places" value="" />

我可以使用RegExp来识别无效值，但我也必须恢复输入中的更改。所以我决定不使用RegExp。

我对其中一些解决方案有过一段奇怪的编辑经历。从用户的角度来看，这似乎非常有效(只在必要时进行干预):

function handleNumberChanged (e) {
const fixed = parseFloat(e.target.value).toFixed(2).toString()
if (fixed.length < parseFloat(e.target.value).toString().length)
e.target.value = fixed
}

使用Javascript在文本框中只输入3个小数点。

<input type="text" class="form-control" onkeypress='return AllowOnlyAmountAndDot(this,event,true);/>

function AllowOnlyAmountAndDot(id, e, decimalbool) {
if(decimalbool == true) {
var t = id.value;
var arr = t.split(".");
var lastVal = arr.pop();
var arr2 = lastVal.split('');
if (arr2.length > '2') {
e.preventDefault();
}
}
}

  <input type="number" class="form-control" id="price" oninput="validate(this)" placeholder="Enter price" name="price" style="width:50%;">


var validate = function(e) {
var t = e.value;
e.value = (t.indexOf(".") >= 0) ? (t.substr(0, t.indexOf(".")) + t.substr(t.indexOf("."), 3)) : t;
}

输入:

<input type="number" name="price" id="price" required>

脚本:

$('#price').on('change', function() {
var get_price = document.getElementById('price').value;
var set_price = parseFloat(get_price).toFixed(2);
$('input[name=price').val(set_price);
})

与Bootstrap只是添加step=".01"，排序我的问题。

<input type="number" class="form-control" name="price" step=".01">

这是我想出的解决方案，它还可以阻止用户输入超过2个小数，上面提到的许多解决方案都不能防止这种情况

html:

<input autocomplete="off" type="number" id="priceField" step=".01" min="0" onkeypress="return priceCheck(this, event);"

Javascript:

function priceCheck(element, event) {
result = (event.charCode >= 48 && event.charCode <= 57) || event.charCode === 46;
if (result) {
let t = element.value;
if (t === '' && event.charCode === 46) {
return false;
}
let dotIndex = t.indexOf(".");
let valueLength = t.length;
if (dotIndex > 0) {
if (dotIndex + 2 < valueLength) {
return false;
} else {
return true;
}
} else if (dotIndex === 0) {
return false;
} else {
return true;
}
} else {
return false;
}
}