使HTML数字输入始终显示2位小数

Question

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

- Cristiano

---

你使用哪种服务器端语言？你会JavaScript吗？ - John Conde

var decimal_2 = (元素的值).toFixed(2); - mohsen Ghalandar

Answer 1

所以如果有人偶然发现这个问题，这里提供了一个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”来获得更多或更少的小数位。

- Groot

---

很不幸，似乎在Firefox 50中无法工作。 - dangowans

Answer 2

一种内联解决方案将Groot和Ivaylo的建议以以下格式组合：

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

- user1413048

---

这不起作用，因为如果您有一个占位符，它将默认使用该值，并且您无法在输入中更改它。 - Radu Lozovanu

实际上，即使使用占位符，在Google Chrome和Microsoft Edge上测试都可以工作。但在Firefox上无法工作。 - eduardo a

Answer 3

一个更简单的解决方案是（如果你要针对特定表单中的所有数字输入）：

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

- Werner ZeBeard Bessinger

---

不错的解决方案，但是这在Firefox（版本70.0.1）上不起作用。:/作为建议，我会使用CSS类来区分受该行为影响的输入数字（即:input[type="number"].with-cents）。 - Jacopo Pace

Answer 4

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

- carpetofgreenness

---

不适用于数字输入。使用此脚本无法输入超过一个数字。 - Vladimir

Answer 5

这里接受的解决方案是不正确的。 请在HTML中尝试以下内容：

onchange="setTwoNumberDecimal(this)" 

而且功能看起来像这样：

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

- MC9000

Answer 6

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

核心代码可免费下载。

- xinthose

Answer 7

纯 HTML 无法实现您所需的功能。我的建议是编写一个简单的 JavaScript 函数来为您完成四舍五入。

- Ivaylo Strandjev

---

我正在使用一个使用浮点数的backbone模型来保存它，所以这不是问题。我只想让文本框中显示的数字有两位小数。 - Cristiano

没事，我误解了你的意思...应该这样做。 - Cristiano

Answer 8

我使用了 @carpetofgreenness's answer，其中你监听了 input 事件而不是被接受的方法中的 change，但是发现无论如何删除字符都没有得到正确处理。

假设我们有一个值为 "0.25" 的输入框。用户按下 "退格" 键，该值变为 "0.20"，并且似乎无法再删除任何字符，因为函数总是在末尾添加 "0"。

为了解决这个问题，我添加了一个守卫条款，用于当用户删除字符时：

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

这修复了该错误，但仍有一件额外的事情要处理 - 现在当用户按“退格”键时，“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);

- Julia Jacobs

Answer 9

请查看Javascript数字的toFixed方法。您可以编写一个onChange函数来处理您的数字字段，调用输入中的toFixed并设置新值。

- spots

---

onChange 真的很烦人。我喜欢使用 jQuery 的 .blur 函数。http://api.jquery.com/blur/ - RandomUs1r

这只是一个最简解决方案，但是使用jQuery可以让OP的生活更轻松。 - spots

@RandomUs1r 真的不必使用 jQuery 来访问 onBlur。 - RozzA

Answer 10

<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

- nageen nayak