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

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

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

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

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