Question

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

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”，如果您愿意，可以获得更多或更少的小数位数。

Answer 2

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

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

Answer 3

此处发布的其他人主要工作，但当我使用同一方向的箭头不止一次更改数字时，使用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);
    };

Answer 4

纯HTML不能做你想要的。我的建议是编写一个简单的javascript函数来为你做roudning。

Answer 5

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

Answer 6

您可以使用Telerik的数字文本框来实现许多功能

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

核心代码为free to download

Answer 7

一个更简单的解决方案是（如果您将特定格式的所有数字输入作为目标）：

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

Answer 8

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

onchange="setTwoNumberDecimal(this)"

和看起来像的功能：

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

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

8 个答案: