I had the same requirement but after checking all these answers I realized there is no inbuilt support to block users from typing a particular number of decimal points. step="0.01" is useful when validating the input for a decimal number but still it will not block users from typing any decimal. In my case, I wanted a solution which will prevent user from entering invalid decimal. So I created my own custom JavaScript function which will enforce user any decimal rule. There is a slight performance issue but for my scenario it is okay to have a very small delay to make sure that user is not typing invalid decimal places. It might be useful for someone who wanted to prevent user from typing invalid decimal value on the input.

如果您愿意，可以使用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。

输入:

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

脚本:

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

你可以用这个。反应钩子

输入< 类型=“当家” name = "价格" 普莱斯placeholder =“回车” 一步=“任何” 所需 />

这是我想出的解决方案，它还可以阻止用户输入超过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;
    }
}

关于货币，我建议:

<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。如果你有一个模式，你就不需要步骤，如果你有一个步骤，你就不需要模式。因此，您可以使用我的代码返回到step="any"，因为模式无论如何都会验证它。

If you'd like to validate onblur, I believe giving the user a visual cue is also helpful like coloring the background red. If the user's browser doesn't support type="number" it will fallback to type="text". If the user's browser doesn't support the HTML5 pattern validation, my JavaScript snippet doesn't prevent the form from submitting, but it gives a visual cue. So for people with poor HTML5 support, and people trying to hack into the database with JavaScript disabled or forging HTTP Requests, you need to validate on the server again anyways. The point with validation on the front-end is for a better user experience. So as long as most of your users have a good experience, it's fine to rely on HTML5 features provided the code will still works and you can validate on the back-end.

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

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
}