使 html 数字输入始终显示 2 位小数答案

【问题标题】：Make an html number input always display 2 decimal places使 html 数字输入始终显示 2 位小数
【发布时间】：2013-01-29 11:57:34
【问题描述】：

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

【问题讨论】：

不是纯 HTML。您使用什么服务器端语言？你懂javascript吗？

标签： html

【解决方案1】：

<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

【讨论】：

【解决方案2】：

<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

【讨论】：

【解决方案3】：

我使用@carpetofgreenness's answer 来监听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);

【讨论】：

【解决方案4】：

我不喜欢所有这些解决方案，它们仅在提交表单或输入字段模糊时才有效。我希望 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/

【讨论】：

【解决方案5】：

您可以使用 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);" />

核心代码是free to download

【讨论】：

【解决方案6】：

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

//limit number input decimal places to two
$(':input[type="number"]').change(function(){
     this.value = parseFloat(this.value).toFixed(2);
});

【讨论】：

不错的解决方案，无论如何，它不适用于 Firefox（版本 70.0.1）。 :/ 作为建议，我会使用 CSS 类来区分受该行为影响的输入数字（即:input[type="number"].with-cents）。

【解决方案7】：

其他人在这里发布的内容主要有效，但是当我多次使用同一方向的箭头更改数字时，使用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);
    };

【讨论】：

【解决方案8】：

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

onchange="setTwoNumberDecimal(this)"

函数看起来像：

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

【讨论】：

【解决方案9】：

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

onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)"

【讨论】：

这是行不通的，因为如果你有一个占位符，它将默认采用该值并且你不能在输入中更改它。
实际上，即使使用占位符，这也适用于 Google Chrome 和 Microsoft Edge，经过测试。不适用于火狐

【解决方案10】：

所以如果其他人偶然发现了这个问题，这里有一个 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);
}

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

【讨论】：

不幸的是，它似乎无法在 Firefox 50 中运行。

【解决方案11】：

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

【讨论】：

onChange 真的很烦人。我喜欢使用 jQuery 的 .blur 函数。 api.jquery.com/blur
这只是一个极简的解决方案，但是使用 jQuery 可以让 OP 的生活更轻松。
@RandomUs1r 真的不需要使用jQuery来访问onBlur

【解决方案12】：

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

【讨论】：

我用一个使用浮点数的主干模型保存它，所以这不是问题。我只想让文本框中显示的数字有两位小数。
没关系，我误会你的意思了……应该做到这个重量