表单输入中的掩码数字仅显示两位小数但保存原始值答案

【问题标题】：Mask number in form input to display only two decimals but save original value表单输入中的掩码数字仅显示两位小数但保存原始值
【发布时间】：2018-01-29 11:11:08
【问题描述】：

我正在尝试在表单输入中格式化数字以仅显示两位小数但仍保留（保存）原始值。我需要这样做，因为如果我只是将数字四舍五入并保存它，那么接下来的值将会不正确。再加上客户最多只想看到两位小数。

我尝试使用这个：https://igorescobar.github.io/jQuery-Mask-Plugin/ 和这个：https://github.com/RobinHerbots/Inputmask，但是这两个插件都会忽略原始值并将其格式化为“*.00”。例如：134.277 会变成 1342.77，这是非常错误的。

我也试过这个，但不幸的是它不起作用：http://csspre.com/rounding-numbers/

是否可以只为显示对数字进行四舍五入？

【问题讨论】：

那么你可能不得不“拆分”这个，一个隐藏字段来保存和提交原始值，一个假的只是为了显示目的，你写你的“格式化”值.但是我看不出这有多大意义，如果该字段应该用于实际的用户输入（既然您询问了 masking，我将假设它是） - 如何我将值从 134.277 更改为 134.278，如果我什至没有显示第三个小数点...？

标签： jquery html css forms input

【解决方案1】：

使用toFixed 进行四舍五入

function doCustomRounding(obj){
    $("#"+obj.id).data("value", obj.value)
    $("#"+obj.id).val(Number(obj.value).toFixed(2));
}

function getOriginalValue(id){
    alert("original Value: "+$("#"+id).data("value"))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input id="formattedNo" value = "0" type="number" onchange="doCustomRounding(this)" data-value="0" /><button onclick="getOriginalValue('formattedNo')">Get Original Value</button>

参见上面的工作 sn-p。输入一个带小数位的数字，然后从文本框中移除焦点。

编辑

我使用 data 属性来存储原始值，以避免必须为每个新输入元素存储在变量中

【讨论】：

谢谢，但这是在一个包含 30 多个输入字段的表单上。像这样存储每个原始值会很痛苦：P
您的编辑几乎正是我最终所做的:) 顺便说一句，我使用“alt”属性来存储原始值。这样我就不必在每个输入中手动放置一个“数据值”，对吧？
听起来几乎一样。您仍然需要以某种方式设置alt 属性@PedroAraujoJorge

【解决方案2】：

打印值时可以使用 toFixed() 方法。

关于 toFixed() 的文档：https://www.w3schools.com/jsref/jsref_tofixed.asp

【讨论】：

但是当我提交表单时，会发送四舍五入的值，对吗？我想要的是保留原始输入值。