51

我正在制作一个表单，用户可以使用 html 数字输入标签输入美元金额。有没有办法让输入框始终显示 2 位小数？

4

11 回答 11

63

因此，如果其他人偶然发现了这个问题，这里有一个 JavaScript 解决方案：

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

如果您愿意，通过更改“2”，toFixed您可以获得更多或更少的小数位。

于 2014-03-12T18:47:51.360 回答
19

内联解决方案按以下格式结合了 Groot 和 Ivaylo 建议：

onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)"
于 2015-08-13T14:56:58.540 回答
7

一个更简单的解决方案是这样的（如果您以特定形式定位所有数字输入）：

//limit number input decimal places to two
$(':input[type="number"]').change(function(){
     this.value = parseFloat(this.value).toFixed(2);
});
于 2019-02-06T19:53:32.277 回答
6

其他人在这里发布的内容主要有效，但是onchange当我多次使用同一方向的箭头更改数字时，使用不起作用。起作用的是oninput。我的代码（主要是从 MC9000 借来的）：

HTML

<input class="form-control" oninput="setTwoNumberDecimal(this)" step="0.01" value="0.00" type="number" name="item[amount]" id="item_amount">

JS

function setTwoNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(2);
    };
于 2017-03-30T17:39:03.347 回答
3

这里接受的解决方案是不正确的。在 HTML 中试试这个：

onchange="setTwoNumberDecimal(this)"

和看起来像的功能： 

 function setTwoNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(2);
    };
于 2017-02-16T21:00:25.147 回答
2

纯 html 不能做你想做的事。我的建议是编写一个简单的 javascript 函数来为您进行筛选。

于 2013-02-13T20:09:26.240 回答
2

您可以使用 Telerik 的numerictextbox许多功能：

<input id="account_rate" data-role="numerictextbox" data-format="#.00" data-min="0.01" data-max="100" data-decimals="2" data-spinners="false" data-bind="value: account_rate_value" onchange="APP.models.rates.buttons_state(true);" />

核心代码免费下载

于 2015-09-21T21:09:06.837 回答
1

查看toFixed以获取 Javascript 数字。您可以为您的数字字段编写一个onChange函数，该函数在输入上调用 toFixed 并设置新值。

于 2013-02-13T20:08:59.540 回答
0

我不喜欢所有这些解决方案，它们仅在提交表单或输入字段模糊时才起作用。我希望 Javascript 能阻止我输入超过两位小数。

我为此找到了完美的解决方案：

<!DOCTYPE html>
<html>
<head>

    <script>

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

    <p> Enter the number</p>
    <input type="text" id="resultText" oninput="validate(this)" />

</body>

https://tutorial.eyehunts.com/js/javascript-limit-input-to-2-decimal-places-restrict-input-example/

于 2021-09-28T15:00:38.517 回答
0

我使用了@carpetofgreenness 的答案，您在其中收听input事件而不是change像接受的那样，但发现在任何情况下都没有正确处理删除字符。

假设我们有一个值为“0.25”的输入。用户点击“Backspace”，该值变为“0.20”，似乎无法再删除任何字符，因为该函数总是在末尾添加“0”。

为了解决这个问题，我在用户删除字符时添加了一个保护子句：

if (e.inputType == "deleteContentBackward") {
  return;
}

这修复了这个错误，但还有一件事需要覆盖 - 现在当用户点击“Backspace”时，值“0.25”会变为“0.2”，但是当我们离开时我们仍然需要在输入中出现两位数字. 为此，我们可以监听blur事件并将相同的回调附加到它。

我最终得到了这个解决方案：

const setTwoNumberDecimal = (el) => {
  el.value = parseFloat(el.value).toFixed(2);
};

const handleInput = (e) => {
  if (e.inputType == "deleteContentBackward") {
    return;
  }
  setTwoNumberDecimal(e.target);
};

const handleBlur = (e) => {
  if (e.target.value !== "") {
    setTwoNumberDecimal(e.target);
  }
};

myHTMLNumberInput.addEventListener("input", handleInput);
myHTMLNumberInput.addEventListener("blur", handleBlur);
于 2021-11-03T21:02:14.690 回答
0 
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous"></script>


<input type="text" class = 'item_price' name="price" min="1.00" placeholder="Enter Price" value="{{ old('price') }}" step="">

<script> 
$(document).ready(function() {
    $('.item_price').mask('00000.00', { reverse: true });
});
</script>

给出的是 99999.99

于 2022-01-09T09:58:35.373 回答