在 <input type="number"> 中允许 2 位小数

使用 step=".01" 代替允许任意数量的小数位的 step="any"，它允许最多两位小数。

规范中的更多详细信息：https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

---

如果有人正在寻找只允许带有可选 2 位小数的数字的正则表达式

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

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

HTML：

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

JS / 查询：

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

---

对于货币，我建议：

<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 功能，只要代码仍然有效并且您可以在后端进行验证。

---

第 1 步：将您的 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 docs。

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

---

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

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

或者按照@SamohtVII 的建议使用 jQuery

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

---

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

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

---

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

如果需要，您可以将此解决方案与 step="0.01" 一起使用。您可以在元素 oninput 事件上使用以下函数。如果性能对您很重要，请考虑在 onchange 事件而不是 oninput 上使用它。请在 data-decimal 属性中指定输入允许的最大小数位数。它的值可以从 0 到任何数字。

function enforceNumberValidation(ele) { if ($(ele).data('decimal') != null) { // 找到十进制的有效规则 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) { // 用户输入了无效的输入 $(ele).val(splitVal[0] + '.' + splitVal[1].substr(0,十进制））； } } else if (decimal == 0) { // 不允许有小数位 var splitVal = val.split('.'); if (splitVal.length > 1) { // 用户输入了无效的输入 $(ele).val(splitVal[0]); // 总是修剪 '.' 之后的所有内容} } } }

我可能会使用 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
}

---

使用此代码

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

---

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

---

你可以使用这个。反应钩子

---

写吧

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

lang='nb" 让你用逗号或句点写你的十进制数字

---

输入时：

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

在脚本上：

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

---