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

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

  <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" step="0.01" name="amount" placeholder="0.00">

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

使用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();
        } 
    }
}

关于货币，我建议:

<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.

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