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

Question

我有一个 <input type="number">，我想将用户的输入限制为纯数字或小数点最多 2 位小数。

基本上，我要求输入价格。

我想避免使用正则表达式。有办法吗？

<input type="number" required name="price" min="0" value="0" step="any">

Answer 1

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

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

Answer 2

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

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

或按照@SamohtVII

的建议使用jQuery

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

Answer 3

第 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

Answer 4

对于货币，我建议：

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

Answer 5

如果有人正在寻找只允许带有可选 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);
});

Answer 6

使用此代码

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

HTML5 输入元素的默认步长值为 step="1"。

Answer 7

输入时：

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

脚本中：

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

Answer 8

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

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

Answer 9

随便写

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

lang='nb" 让你用逗号或句点写小数

Answer 10

你可以用这个。反应挂钩

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

Answer 11

我有同样的要求，但在检查了所有这些答案后我意识到没有内置支持来阻止用户输入特定数量的小数点。 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.

Answer 12

我对其中一些解决方案有一种奇怪的编辑体验。从用户的角度来看，这似乎工作得很好（只在必要时进行干预）：

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
}

Answer 13

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

Answer 14

  <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"> 允许 2 位小数

Allow 2 decimal places in <input type="number">

html

numbers