使 html 数字输入始终显示 2 个小数位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14862009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make an html number input always display 2 decimal places
提问by Cristiano
I'm making a form where the user can enter a dollar amount using an html number input tag. Is there a way to have the input box always display 2 decimal places?
我正在制作一个表单，用户可以在其中使用 html 数字输入标签输入美元金额。有没有办法让输入框始终显示2个小数位？
回答by Groot
So if someone else stumbles upon this here is a JavaScript solution to this problem:
因此，如果其他人偶然发现这里是此问题的 JavaScript 解决方案：
Step 1:Hook your HTML number input box to an onchangeevent
第 1 步：将您的 HTML 数字输入框连接到一个onchange事件
myHTMLNumberInput.onchange = setTwoNumberDecimal;
or in the html code if you so prefer
或者在 html 代码中，如果你愿意的话
<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />
Step 2:Write the setTwoDecimalPlace method
第 2 步：编写 setTwoDecimalPlace 方法
function setTwoNumberDecimal(event) {
this.value = parseFloat(this.value).toFixed(2);
}
By changing the '2' in toFixedyou can get more or less decimal places if you so prefer.
toFixed如果您愿意，通过更改中的“2”，您可以获得更多或更少的小数位。
回答by user1413048
an inline solution combines Groot and Ivaylo suggestions in the format below:
内联解决方案以以下格式结合了 Groot 和 Ivaylo 的建议：
onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)"
回答by carpetofgreenness
What other folks posted here mainly worked, but using onchangedoesn't work when I change the number using arrows in the same direction more than once. What did work was oninput. My code (mainly borrowing from MC9000):
其他人在这里发布的内容主要有效，但是onchange当我多次使用同一方向的箭头更改数字时，使用不起作用。什么起作用了oninput。我的代码（主要是从MC9000借来的）：
HTML
HTML
<input class="form-control" oninput="setTwoNumberDecimal(this)" step="0.01" value="0.00" type="number" name="item[amount]" id="item_amount">
JS
JS
function setTwoNumberDecimal(el) {
el.value = parseFloat(el.value).toFixed(2);
};
回答by Werner ZeBeard Bessinger
An even simpler solution would be this (IF you are targeting ALL number inputs in a particular form):
一个更简单的解决方案是（如果您以特定形式定位所有数字输入）：
//limit number input decimal places to two
$(':input[type="number"]').change(function(){
this.value = parseFloat(this.value).toFixed(2);
});
回答by Ivaylo Strandjev
Pure html is not able to do what you want. My suggestion would be to write a simple javascript function to do the roudning for you.
纯 html 不能做你想做的事。我的建议是编写一个简单的 javascript 函数来为您完成这项工作。
回答by spots
回答by xinthose
You can use Telerik's numerictextbox for a lot of functionality
您可以使用 Telerik 的 numerictextbox 来实现许多功能
<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);" />
the core code is free to download
核心代码可免费下载
回答by MC9000
The accepted solution here is incorrect. Try this in the HTML:
这里接受的解决方案是不正确的。在 HTML 中试试这个：
onchange="setTwoNumberDecimal(this)"
and the function to look like:
以及看起来像的功能：
function setTwoNumberDecimal(el) {
el.value = parseFloat(el.value).toFixed(2);
};
